Você provavelmente já deve ter passado por esse tipo de problema utilizando o framework jQuery para fazer animações nos elementos de sua página, o problema ocorre principalmente quando se deseja criar menus animados, onde através da função animate() da jQuery ao passar o mouse rapidamente pelo menu, o efeito pode ser executado ainda diversas vezes mesmo após você retirar o mouse.
Para que fique claro a natureza do problema, basta você acessar esse exemplo criado e experimente passar o mouse rapidamente diversas vezes encima do menu. Você verá que mesmo após retirar o mouse, o efeito de animate() ainda é executado.
Observe abaixo o código JavaScript com a utilização da jQuery para o efeito do menu:
$(document).ready(function() {
$('ul.anim_queue a')
.hover(function() {
$(this).animate({ left: 20 }, 'fast');
},function(){
$(this).animate({ left: 0 }, 'fast');
});
});
Para evitar esse problema indesejável, basta utilizar a função stop(). Agora vamos ao código final sem problemas de animação:
$(document).ready(function() {
$('ul.anim_queue a')
.hover(function() {
$(this).stop().animate({ left: 20 }, 'fast');
},function() {
$(this).stop().animate({ left: 0 }, 'fast');
});
});
Agora observem o exemplo com o código corrigido. Como você pode ver, a animação só ocorre uma vez, mesmo após você passar rapidamente o mouse sobre o menu, evitando assim o problema anterior.
Esse post foi escrito com base no artigo original de Brandon Aaron
