Arquivos de sites
jQuery – Parando animações com o método stop()
Posted by Gustavo Amaro
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
Publicado em JavaScript, jQuery
Etiquetas: :aplicacao, animação, animações, animate, basico, beginner, brasil, brazil, brazilian, brazilian portuguese, call, calls, chamada, chamadas, clearQueue(), clearQueue().hide(), começando, css, desenvolvendo, desenvolvimento, easy, example, exemplo, fácil, fila, filas, forma simples, framework, hide, how to, html, início, iniciante, inline, java, JavaScript, javascript:void(0), jQuery, método, method, onclick, parado, parametro, Parando animações, parar, passo-a-passo, portugues, portuguese, prático, queue, queues, reset, sample, simples, slideDown, stop all, stop(), stop(true), stopped, tag, true, tutorial, usando, utilizando