em
jQuery: Como evitar problemas com animate()

jQuery: Como evitar problemas com animate()

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

Comentários

  1. Sinceramente, nao vi diferença.

    por Alexsandro Responder
    1. Valeu mesmo tava atraz disso a um tempao quebro um galhao,
      mais uma vez muito obrigado…

      …simples direto sem inrolaçao, esse é bom.

      por Douglas — Responder
    2. 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).

      por wellington — Responder
  2. Legal sempre achei isso estranho. E já vi isso em vários sites por ae…

    por Mauro — Responder
  3. @Alexsandro passou o mouse várias vezes em ambos rapidamente??? Não tem como não perceber a diferença!

    Ótima dica!!!

    por Raul Souza Lima Responder
  4. 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…

    por Thiago Cavalcanti Responder
  5. @Thiago,

    Em situações simples como essa acho extremamente desnecessário utilizar um plugin, bastando somente digitar uma função a mais. Abraços.

    por Pedro Rogério Responder
  6. @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…

    por Thiago Cavalcanti Responder
  7. 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

    por Vicente Lyrio — Responder
  8. Boa dica Pedro Rogério.
    É melhor animar a propriedade CSS paddingLeft em lugar de left.
    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 paddingLeft você evita este outro efeito indesejável. Isto acontece porque ao animar left a área clicável se desloca para a direita causando o efeito estranho.
    Abraços

    por Maujor Responder
    1. Falou e disse o mestre!

      por Cleiton — Responder
    2. Esse é o mestre Maujor !
      E excelente tutorial !

      por Gabriel Responder
  9. Ótima dica Pedro! Estava me batendo com hover!

    Esse efeito memória tava me matando.. …rsrs…

    ; o )

    Ótima dica do Maujor tambem!

    ; o )

    por Thomas — Responder
  10. 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.

    por Édipo Responder
  11. 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!

    por Orlando Leite Responder
  12. Exatamente o que eu precisava.

    por Marcos Responder
  13. Achei muito legal o exemplo, realmente resolveu o meu problema com animate. Valeu!!!

    por Gustavo Responder
  14. Pedro, caso eu queira que ao clicar em um link a classe dele altere com deveria fazer?

    Abs.

    por Diogo — Responder
  15. 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.

    por Francisco — Responder
  16. perfeito, parabéns stop antes do animate é essencial !

    por lucas.nunes — Responder
  17. Só um errinho aí no texto: jQuery não é um framework, é uma biblioteca de funções.

    por Rodrigo Responder
    1. 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…

      por Pyetro Responder
  18. Parabéns!!
    Estava procurando isso mesmo!

    por Tácio — Responder
  19. Rápido e explicativo. Exatamente o que eu precisava. Obrigado!

    por Henrique Guampa Responder
  20. HoverIntent Corrige esse efeito maluco. http://cherne.net/brian/resources/jquery.hoverIntent.html

    por Mateus Avila Isidoro Responder
  21. Valew cara estava procurando isso mesmo, muito bom o post

    por jailson — Responder
  22. Very useful, thanks a lot!

    por Gabriele Malaspina Responder
  23. Obrigado, faz tempo que tava procurando por isso.

    por Anônimo — Responder
  24. 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 ????

    por Rafael Honorato Responder
  25. Muito interessante!
    Obrigado por compartilhar

    por Bruno Leite — Responder

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>