J'ai une flèche rebondissante sur mon site Web que j'ai créé avec jQuery et seinterval, comme ceci:
bouncing = setInterval(function() {
$("div").animate({
top:"30px"
},100,"easeInCubic",function() {
$("div").animate({
top:"0px"
},100,"easeOutCubic");
});
console.log("bounced");
},200);
4 Réponses :
Ce n'est pas une bonne idée de mélanger Que Les fonctions d'animation de jQuery manipulent en réalité le CSS, et il n'y a rien au-delà de HTML. Une autre option utiliserait une toile, mais c'est une approche complètement différente et je ne le recommanderais pas. Avec l'animation de JQuery, vous êtes déjà au meilleur choix. P> LI>
Ceci est une solution simple à votre problème: P> animate () code> avec des minuteries de cette façon. Il y a Animate () code> est mis une demande d'animation dans une file d'attente de travail qui sera traitée plus tard, date à laquelle le bon moment vient. Lorsque vous cassez l'intervalle, les choses accumulées dans la file d'attente seront toujours traitées. Il y a une méthode pour effacer la file d'attente et arrêter toute l'animation immédiatement. P> li>
$("div").click(function() {
$("div").stop().clearQueue().css({ top: "0px" });
// you want to reset the style because it can stop midway
});
En fait, je n'ai pas pu obtenir ce travail. ClearQueue a travaillé pour arrêter l'animation mais j'ai aussi ajouté une console.log () pour me montrer lorsque le bouton rebondissait et le bouton s'est arrêté quand j'avais besoin de cela, mais il a gardé des rebonds à fortes rebondissements, ce qui a gâché le timing d'autres animations. Cela a peut-être eu quelque chose à voir avec avoir besoin d'appeler rebond avec un paramètre pour spécifier quel élément dont j'avais besoin pour rebondir, mais je ne suis pas sûr. J'ai utilisé la solution de contournement de Jfiction00 qui a travaillé pour moi - merci pour votre aide!
Ah oui. C'était un bug que je n'ai pas remarqué. J'ai ajouté un stop () avant le ClearQueue () . Cela fonctionne maintenant comme prévu.
Juste pour votre intérêt, mettez un console.log () avant le si (self.data ("stop")) renvoie; dans le code de JIVIND00 et vous verrez que Il a le même problème que j'avais.
Si vous souhaitez utiliser JavaScript pour l'animation, vous pouvez utiliser quelque chose de mieux comme la bibliothèque de Greensock Tween
http://greensock.com/docs/#/html5/gsap/tweenmax/ à /
quelque chose comme ceci:
Vous essayez de coordonner parfaitement un Si, au lieu de cela, vous utilisez simplement l'achèvement de la deuxième animation pour redémarrer le premier et faire votre répétition comme ça, puis Vous avez une coordination parfaite à chaque fois. Vous pouvez voir qu'ici dans une autre version de votre codepen: http: // codepen. io / anon / stylo / nxyeyd setInterval () Minuterie et deux animations de jQuery de telle sorte que les deux sortent parfaitement coordonnés. Cela demande des problèmes et les deux peuvent dériver au fil du temps, il est donc considéré comme un mauvais modèle de conception.
Fait quelques modifications pour éviter d'utiliser une variable globale.
Vous pouvez envelopper votre code d'intervalle avec: Cela déclenche votre animation uniquement si votre précédent est terminé.
La raison pour laquelle il rebondissait bizarre est que vos animations sont en file d'attente.
Vous pouvez vérifier comment cela fonctionne maintenant:
http://codepen.io/luminaxster/pen/xkzlbg i Recommanderait en utilisant le rappel complet lorsque la deuxième animation se termine plutôt et avoir une variable pour contrôler un appel récursif de rebond dans cette version:
Au cours du traitement JS, les fonctions d'intervalle sont asynchrones. Alors ils attendent une «pause» dans le code d'exécution. L'événement est déclaré, puis incendie quand il y a une chance. Les intervalles sont très incompatibles et ne sont pas recommandés pour des événements qui doivent être exécutés à une heure précise. Voir: ejohn.org/blog/how-javascript-timers-work
Honnêtement, je pense que c'est mauvais ux de faire des choses comme ce rebond / flash / brillant / throbique / autre (Office 2007 a dû créer le bouton de remplacement du menu "Fichier", car il n'était pas évident qu'il s'agissait d'un bouton et d'irriter le% de dollars. ! & Hors de moi) Mais en termes de raisons pour la raison pour laquelle il ne fonctionne pas comme si vous le souhaitez, c'est une bonne question (et je n'ai pas de réponse).
N'utilisez pas JavaScript pour les animations (bien, peut-être que si vous utilisez la vitesse ou similaire), collez-vous sur des animations CSS. De plus,
seinterval n'est pas quelque chose que vous utiliseriez pour l'animation puisqu'il est asynchrone. Bottom Line: Conservez le coiffage à CSS ;-)Merci a tous. Je vais chercher une solution de contournement CSS. @ Draco18s - c'est pour un site interactif qui a besoin d'éléments de boutons pour attirer l'attention sur eux-mêmes.
@MCHEAH Bouton Les éléments ne doivent jamais nécessiter d'attirer l'attention sur eux-mêmes. La seule raison serait si elles ne ressemblaient pas à des boutons. Mais c'est une question pour ux se