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):

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

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

javascript.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:

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

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

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

Veja também