Método stop

El método stop nos permite detener inmediatamente una animación en ejecución. La animación continuará desde la siguiente función sin completar la anterior.

Sintaxis

Así es como detenemos una animación en ejecución. Se pueden pasar dos parámetros opcionales que aceptan valores booleanos. Si el primer parámetro se establece en true, las funciones restantes en la cola de animación se eliminarán y nunca se ejecutarán. Si el segundo parámetro se establece en true, al detener la animación las propiedades CSS del elemento inmediatamente tomarán sus valores finales (es decir, si el objetivo era ocultar el elemento suavemente, entonces se ocultará instantáneamente):

.stop([clearQueue], [jumpToEnd]);

También se puede pasar un parámetro opcional, en el que se especifica el nombre de la cola:

.stop([nombre de la cola], [clearQueue],[jumpToEnd]);

La animación se puede desactivar globalmente usando la configuración jQuery.fx.off = true, que establece el valor de la duración en 0.

Ejemplo

Hagamos que por cada clic en el botón #toggle nuestro rectángulo se despliegue y se pliegue usando el método slideToggle. Haga clic en el botón sin esperar a que termine la animación - la siguiente etapa se iniciará, sin esperar a que termine la anterior, gracias al método stop:

<button id="toggle">toggle</button>
<div id="test"></div>

#test {
	background-color: green;
	border: 1px solid black;
	width: 200px;
	height: 100px;
	margin: 10px;
}

$('#toggle').on('click', function() {
	$('#test').stop().slideToggle(1500);
});

Ver también

método clearQueue,
que permite eliminar todos los elementos pendientes de la cola de funciones
propiedad jQuery.fx.off,
que permite desactivar globalmente la animación