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.
Valeu mesmo tava atraz disso a um tempao quebro um galhao,
mais uma vez muito obrigado…
…simples direto sem inrolaçao, esse é bom.
A diferença é que se o usuario ficar passando o mouse varias vezes e depois retirar o mouse o efeito não vai ficar se repetindo de acordo com a quantidade de vezes que o usuário passou o mouse, pois é um efeito (hover).
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
Falou e disse o mestre!
Esse é o mestre Maujor !
E excelente tutorial !
Ó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!
Exatamente o que eu precisava.
Achei muito legal o exemplo, realmente resolveu o meu problema com animate. Valeu!!!
Pedro, caso eu queira que ao clicar em um link a classe dele altere com deveria fazer?
Abs.
Olá, tentei seguir esta dica de adicionar o stop() porem… ele começa a funcionar depois que eu passo mais de 2 ou 3 vezes o mouse sobre a regiao.. ele para de funcionar.
perfeito, parabéns stop antes do animate é essencial !
Só um errinho aí no texto: jQuery não é um framework, é uma biblioteca de funções.
Amigo desculpe mas não é tão simples assim…
Como dito neste site (http://jquerybrasil.org/jquery-biblioteca-ou-framework/) esta é uma dúvida até mesmo dos próprios desenvolvedores do jQuery…
Então cuidado ao corrigir o que talvez não tenha que ser corrigido…
Parabéns!!
Estava procurando isso mesmo!
Rápido e explicativo. Exatamente o que eu precisava. Obrigado!
HoverIntent Corrige esse efeito maluco. http://cherne.net/brian/resources/jquery.hoverIntent.html
Valew cara estava procurando isso mesmo, muito bom o post
Very useful, thanks a lot!
Obrigado, faz tempo que tava procurando por isso.
Estou com problemas com o “animate()”. Qeuro fazer uma animação de nuvem passando atras da página bemmm lento, porém quando coloco lento de mais fica parando a imagem… Será que tem como eu controlar quantos frames apareceram por segundo ????