jQuery stop (true, true) pour passer à la fin de toutes les animations de la queue

J’utilise la méthode stop(true, true) jQuery pour effacer les animations en cours afin que la suivante commence immédiatement. J’ai remarqué que le premier paramètre, clearQueue , efface la totalité de la queue d’animation, mais que le second paramètre, jumpToEnd , ne fait que sauter à la fin de l’animation en cours d’exécution et pas à celles qui ont été supprimées de la queue. Y a-t-il un moyen de faire en sorte que tout soit clair et de passer à la fin de toutes les animations en queue?

J’ai fini par chaîner quelques appels d’ stop(false, true) place, mais cela ne gérera que 3 animations en queue, par exemple.

 $(this) .stop(false, true) .stop(false, true) .stop(false, true) .addClass('hover', 200);

Modifier:

J’ai fini par append ma propre méthode, stopAll , selon la réponse d’Ates Goral:

 $.fn.extend({ stopAll: function () { while (this.queue().length > 0) this.stop(false, true); return this; } });

 $(this).stopAll().addClass('hover', 200);

J’espère que quelqu’un d’autre trouvera cela utile.

jQuery 1.9 a introduit la méthode .finish () , qui réalise exactement cela.

Le chaînage de plusieurs stop(false, true) sens. Au lieu de coder en dur un nombre fixe d’appels en chaîne, vous pouvez vérifier la longueur de la queue:

 while ($(this).queue().length) { $(this).stop(false, true); }

Démo: http://jsfiddle.net/AB33X/

Je remarque également dans la documentation de la méthode .finish () de jQuery 1.9 que

 Les animations peuvent être arrêtées globalement en définissant la propriété $ .fx.off 
 à vrai.  Lorsque cela est fait, toutes les méthodes d'animation seront immédiatement 
 définir les éléments à leur état final lors de l'appel, plutôt que d'afficher un effet.

Il y a aussi une belle démonstration des différentes méthodes sur la page de documentation de .finish () .

Testez la présence de la classe (définie sur le survol et supprimée sur le rappel animé de mouseOut) avant de lancer une nouvelle animation. Lorsque la nouvelle animation commence, retirez la queue.

 $("div").hover(function(){ if (!$(this).hasClass('animated')) { $(this).dequeue().stop().animate({ width: "200px" }); } }, function() { $(this).addClass('animated').animate({ width: "100px" }, "normal", "linear", function() { $(this).removeClass('animated').dequeue(); }); });