jQuery stop (verdadero, verdadero) para saltar al final de todas las animaciones en la cola

Question

He estado usando el método stop(true, true) de jQuery para borrar las animaciones en ejecución, por lo que el siguiente se inicia inmediatamente. Observé que el primer parámetro, clearQueue, borra toda la cola de animación, pero el segundo parámetro, jumpToEnd, solo salta al final de la animación actualmente en ejecución y no a los que se eliminaron de la cola. ¿Hay alguna manera de tenerlo claro y saltar al final de todas las animaciones en cola?

En su lugar, he encadenado unas pocas llamadas stop(false, true), pero esto solo manejará 3 animaciones en cola, por ejemplo.

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

Editar:

acabé añadiendo mi propio método, stopAll, según la respuesta de Ates Goral:

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

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

espero otra persona encuentra este útil.

Answer 1

jQuery 1.9 introdujo el método .finish(), que logra exactamente eso.

Answer 2

Encadenamiento múltiple stop(false, true) tiene sentido. En lugar de difícil codificar un número fijo de llamadas encadenadas, se puede comprobar la longitud de la cola:

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

Demostración: http://jsfiddle.net/AB33X/

Answer 3

También aviso por parte de la documentación del método .finish() en jQuery 1.9 que

 
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. 

También hay una buena demostración de los distintos métodos en la página .finish() documentación.

Answer 4

Prueba de presencia de clase (se coloca al pasar el mouse sobre el mouse y se elimina en el mouse, excepto devolución de llamada animada) antes de mirar una nueva animación. Cuando se inicia una nueva animación, dequeue.

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