Neste artigo, você vai acompanhar como evitar efeitos indesejados em stop animações com JQuery. Acompanhe cada método e seus parâmetros, solucionando problemas e executando comandos.

Invocando a função animate

Por default, as animações com JQuery são colocadas em fila. Essas filas são tratadas internamente pelo objeto fx, o que significa que todas as vezes que uma função animate é invocada, ela entra em uma fila e executará o comando. Em alguns contextos, isso pode ser muito ruim.

Um cenário simples pode ser denominado em um menu, onde de usa animação no evento mouseover, ou mouselive. Ao passar o mouse sobre a cada item do menu, a função animate será executada em fila. Se não usamos o comando .stop() e passamos alguns parametros à essa função, poderemos ter efeitos indesejados.

Sintax do método stop

element.stop(clearQueue, jumpToEnd)

Este método aceita dois parâmetros booleanos, que por padrão é definida como false. O primeiro parâmetro limpa a fila da animação. Em vez disso, o segundo parâmetro força a animação atual ser concluída antes de parar. Veja como fica uma animação sem o tratamento de .stop():

Clique aqui e veja sem o método stop [ Menu-sem-Stop.html ]

$(function () {
	$('#menu ul li').hover(function () {
		$(this)
            	   .find('ul')
            	   .slideDown(500);
	},
    function () {
    	$(this)
           .find('ul')
           .slideUp(200);
    });
});

Observe que a animação não para a cada vez que o mouse é colocado sobre algum item do menu. Veja que, com a simples adição de uma linha, esse problema é resolvido:

$(function () {
	$('#menu ul li').hover(function () {
		$(this)
            .find('ul')
            .slideDown(100);
	},
    function () {
    	$(this)
           .find('ul')
           .stop(true, true)
           .slideUp(100);
    });
});

Clique aqui e veja o efeito do menu corretamente [ Menu-Stop.html ]

Confira mais informações sobre .stop() na API do JQuery. Compartilhe seus testes e mande seu feedback através dos comentários para compartilhamos novos métodos. Até a próxima!