jQuery – Parando animações com o método stop()

No capítulo anterior, nós vimos como nós podemos fazer animações customizadas usando o método animate() e como nós podemos ter várias animações depois de cada uma,  fazendo várias chamadas de animações e desse modo usando a fila de animação do jQuery. Porém, algumas vezes você precisa para uma animação antes dela terminar, e para isso, o jQuery tem um método stop(). Ele funciona para todos os efeitos relacionados as funções do jQuery, incluindo o sliding, fading e animações customizadas com o método animate(). Aqui está um exemplo onde nós usamos ele:

<a href="javascript:void(0);" onclick="$('#divTestArea1').slideDown(5000);">Show box</a>   
<a href="javascript:void(0);" onclick="$('#divTestArea1').stop();">Stop</a>
<div id="divTestArea1" style="padding: 100px; background-color: #89BC38; text-align: center; display: none;">
        <b>Hello, world!</b>
</div>

Para fazer o exemplo um pouco mais compacto, eu usei chamadas inline nos eventos onclick dos dois links. Quando você clicar o primeiro link, o método slideDown() é usado no seu elemento div, começando um deslizamento para baixo (slide down) devagar. Um clique no segundo link  irá matar a animação corrente/atual sendo realizada no elemento selecionado. Esse é o comportamento padrão do método stop(), mas dois parâmetros opcionais nos permitem fazer as coisas de forma diferente. O primeiro parâmetro especifica se a fila de animação deve ser limpa ou não. O padrão é false, que significa que apenas a animação ativa será parada, permitindo quaisquer animações enfileiradas sejam executadas mais tarde. O seguinte exemplo demonstrará isso:

<a href="javascript:void(0);" onclick="$('#divTestArea2').slideDown(5000).slideUp(5000);">Show box</a>   
<a href="javascript:void(0);" onclick="$('#divTestArea2').stop();">Stop</a>   
<a href="javascript:void(0);" onclick="$('#divTestArea2').stop(true);">Stop all</a>   
<a href="javascript:void(0);" onclick="$('#divTestArea2').clearQueue().hide();">Reset</a>

<div id="divTestArea2" style="padding: 100px; background-color: #89BC38; text-align: center; display: none;">
        <b>Hello, world!</b>
</div>

Nós adicionamos uma segunda animação ao link “Show box”. Isso irá deslizar a caixa para baixo devagar, e uma vez terminado, deslizará ela para cima de novo. O sistema de fila garante que esses passo serão executados na sequência. Agora, clique no link “Reset” para ter a caixa escondida de novo e então clique no link “Show box” mais uma vez, seguido por um clique no “Stop”. Você verá que a primeira animação foi parada,seguindo para a segunda animação a ser executada. Porém, se você tentar de novo e clicar no “Stop all” em vez disso, o valor true passado irá garantir que a fila inteira está limpa e que toda animação no elemento está parada.

O Segundo parâmetro diz ao jQuery se você gostaria de que ele apenas parar onde ele está, ou apressar a animação em invés disso, permitindo ele terminar. Isso faz uma grande diferença, porque como você pode ver no primeiro exemplo, uma vez que você aperta stop, o comportamento padrão é simplesmente para a animação onde ela está e deixá-la assim. O exemplo seguinte irá mostrar a diferença:

<a href="javascript:void(0);" onclick="$('#divTestArea3').slideDown(5000);">Show box</a>   
<a href="javascript:void(0);" onclick="$('#divTestArea3').stop(true);">Stop</a>   
<a href="javascript:void(0);" onclick="$('#divTestArea3').stop(true, true);">Stop but finish</a>   
<a href="javascript:void(0);" onclick="$('#divTestArea3').clearQueue().hide();">Reset</a>
<div id="divTestArea3" style="padding: 100px; background-color: #89BC38; text-align: center; display: none;">
        <b>Hello, world!</b>
</div>

Tente as duas variações do “Stop” – a primeira irá para imediatamente, enquanto a segunda irá apressar a animação para o fim.

Fonte: jquery-tutorial.net