jQuery - ¿Animación de interrupción?

Question

Estoy usando jQuery para algunos efectos de animación simples una vez que el usuario hace clic en algo. Sin embargo, si vuelven a hacer clic antes de que se complete la primera animación, no sucede nada. Deben esperar hasta que la primera animación haya terminado.

¿Hay alguna forma de interrumpir el proceso de animación y comenzar de cero cuando se produce un segundo clic?

Gracias.

Answer 1

se puede utilizar el método de stop()

HTML:

<input type="button" value="fade out" id="start"> 
<input type="button" value="stop" id="stop"> 
<div style="background-color: blue; height: 100px;">Testing</div> 

JS:

$("#start").click(function() { $("div").fadeOut("slow"); }); 
$("#stop").click(function() { $("div").stop(); }); 

edición: El código anterior se ha probado y funciona en FF3. 5 e IE8

Utilícelo en el elemento sobre el que desea interrumpir la animación.

Solo recuerda que el elemento dejará de animar la mitad de la animación. Por lo tanto, es posible que deba restablecer el CSS después de la detención, según sus circunstancias.

Edit2: A partir de jQuery 1.7 ha habido algunos cambios. Ahora puede agrupar colas de animación con nombres. Por lo tanto, el método stop() aceptará un booleano o una cadena como primer parámetro. Si es un booleano, borrará/no borrará todas las colas. Pero si proporciona una cadena, solo borrará las animaciones en ese grupo de cola.

Answer 2

Suena como un trabajo para dequeue.

Answer 3

puede simplemente dejar de() antes de reiniciar la animación

$("#start").click(function() { $("div").stop().fadeOut("slow"); });