jQuery - desvanecimento de animação em foco

Question

Eu tenho um pouco de jQuery animação que se desvanece em um link quando pairando um:

$(function() {
  $('.delete').hide();
  $('#photos img').hover(function() {
    $(this).parents('li').children('.delete').fadeIn('fast');
  }, function() {
    $(this).parents('li').children('.delete').fadeOut('fast');
  });
});

Mas se eu mover rapidamente o meu mouse dentro e fora da imagem, a nova animação é sempre adicionado à fila e quando eu parar eu posso ver o link pulsando por um tempo. Eu tentei usar .Stop (true), mas, em seguida, por vezes, o fade in efeito não funciona em todos (ou apenas até certo valor de opacidade inferior a 1). O que posso fazer?

Obrigado, Eric

Answer 1

A melhor maneira é usar hoverIntent plugin. Este lida com as questões acima. Ele também adiciona um pequeno atraso para a animação isso, se um usuário passa a mover-se rapidamente o mouse sobre todos os links que você não obter um fluxo de animação feia de todas as ligações.

Answer 2

Uma forma de evitar tais problemas que ocorrem é a utilização de paragem () em conjunto com fadeTo (), como no trecho abaixo:

$(function() {
  $('.delete').fadeTo(0, 0);
  $('#photos img').hover(function() {
    $(this).parents('li').children('.delete').stop().fadeTo('fast', 1);
  }, function() {
    $(this).parents('li').children('.delete').stop().fadeTo('fast', 0);
  });
});

Espero que isso resolve o seu problema!