jQuery stop (true, true) per passare alla fine di tutte le animazioni in coda

Question

Ho utilizzato il metodo stop(true, true) di jQuery per cancellare le animazioni in esecuzione in modo che il successivo inizi immediatamente. Ho notato che il primo parametro, clearQueue, cancella l'intera coda di animazione ma il secondo parametro, jumpToEnd, salta alla fine dell'animazione attualmente in esecuzione e non a quelli che sono stati rimossi dalla coda. C'è un modo per avere chiaro e saltare alla fine di tutte le animazioni in coda?

Ho finito per incatenare alcune chiamate stop(false, true), ma questo gestirà solo 3 animazioni in coda, ad esempio.

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

Edit:

ho finito di aggiungere il mio metodo, stopAll, come per la risposta di Ates Goral:

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

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

Spero che qualcun altro trova questo utile.

Answer 1

jQuery 1.9 ha introdotto il metodo .finish(), che realizza esattamente questo.

Answer 2

Concatenamento multiplo stop(false, true) ha senso. Invece di codificare un numero fisso di chiamate incatenati, si potrebbe verificare la lunghezza della coda:

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

Demo: http://jsfiddle.net/AB33X/

Answer 3

Ho anche notato dalla documentazione del metodo .finish() in jQuery 1.9 che

 
Animations may be stopped globally by setting the property $.fx.off 
to true. When this is done, all animation methods will immediately 
set elements to their final state when called, rather than displaying an effect. 

C'è anche una bella dimostrazione dei vari metodi sulla pagina di .finish() documentazione.

Answer 4

Test per la presenza di classe (impostata su passaggio del mouse e rimossa sul mouseNascondi callback animato) prima di iniziare la nuova animazione. Quando la nuova animazione inizia, deseleziona.

$("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(); 
    }); 
});