jQuery: Como evitar problemas com animate()
Postado por: Pedro Rogério emVocê 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
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.
Sinceramente, nao vi diferença.
Legal sempre achei isso estranho. E já vi isso em vários sites por ae…
@Alexsandro passou o mouse várias vezes em ambos rapidamente??? Não tem como não perceber a diferença!
Ótima dica!!!
O ideal é fazer como o próprio Brandon falou no post dele e usar o plugin hoverIntent, mais uma vez, não vamos reinventar a roda…
@Thiago,
Em situações simples como essa acho extremamente desnecessário utilizar um plugin, bastando somente digitar uma função a mais. Abraços.
@Pedro Rogério,
O pior é que faz diferença, mínima, mas faz.
O Diabo mora nos detalhes.
Eu me preocupo muito com os detalhes, talvez demais…
A dica é boa, mas o exemplo é que não deixa isso muito claro.
Cheguei a essa mesma conclusão enquanto fazia um site (www.saldanhaconstrutora.com.br), antes estava usando fadeIn e fadeOut, mas se passasse o mouse repetidamente sobre a imagem com a tarja ‘lançamento’, ela aparecia e sumia várias vezes, gerando um efeito estranho.
Fiz a troca para o animate pq é o único método com a possibilidade de parar, usando exatamente o stop.
abraço
Boa dica Pedro Rogério.
É melhor animar a propriedade CSS
paddingLeftem lugar deleft.Observe no exemplo com o código corrigido o que acontece quando o mouse é colocado em repouso na extremidade esquerda de um link do menu.
Animando
paddingLeftvocê evita este outro efeito indesejável. Isto acontece porque ao animarlefta área clicável se desloca para a direita causando o efeito estranho.Abraços
Ótima dica Pedro! Estava me batendo com hover!
Esse efeito memória tava me matando.. …rsrs…
; o )
Ótima dica do Maujor tambem!
; o )
Sorte que tinha lido esse post outro dia, só por ler, ontem estava fui usar o animate e esta dando problema para controlar as animações de um menu, stop() resolveu tudo. um plugin para uma coisa tão simples realmente é não é necessário.
Boa dica!
Outro nome para esta técnica é overwrite animation. Nome mais utilizado entre flash coders.
Achei bem simples e interessante a forma com que o jquery lida com isto.
Abx!