Método stop

O método stop nos permite parar imediatamente uma animação em execução. A animação continuará a partir da próxima função sem concluir a anterior.

Sintaxe

É assim que paramos uma animação em execução. Podemos passar dois parâmetros opcionais, que aceitam valores Booleanos. Se o primeiro parâmetro for definido como true, as funções restantes na fila de animação serão removidas e nunca serão executadas. Se o segundo parâmetro for definido como true, ao parar a animação, as propriedades CSS do elemento assumirão imediatamente seus valores finais (ou seja, se o objetivo era ocultar o elemento suavemente, ele será ocultado instantaneamente):

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

Também é possível passar um parâmetro opcional, no qual o nome da fila é especificado:

.stop([nome da fila], [clearQueue],[jumpToEnd]);

A animação pode ser desativada globalmente usando a configuração jQuery.fx.off = true, que define o valor da duração como 0.

Exemplo

Vamos fazer com que a cada clique no botão #toggle nosso retângulo se expanda e contraia usando o método slideToggle. Clique no botão sem esperar a conclusão da animação - o próximo estágio será iniciado, sem aguardar a conclusão do anterior, graças ao 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);
});

Veja também

método clearQueue,
que permite remover todos os itens não executados da fila de funções
propriedade jQuery.fx.off,
que permite desativar a animação globalmente