jQuery - Animation de fondu en survol

Question

J'ai une petite animation jQuery qui s'estompe dans un lien lors du survol d'un:

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

Mais si je déplace rapidement la souris dans l'image, la nouvelle animation est toujours ajoutée à la file d'attente et, lorsque je m'arrête, je peux voir le lien vibrer pendant un moment. J'ai essayé d'utiliser .stop (true), mais parfois, l'effet de fondu ne fonctionne pas du tout (ou jusqu'à une valeur d'opacité inférieure à 1). Que puis-je faire?

Merci, Eric

Answer 1

La meilleure solution consiste à utiliser le plug-in hoverIntent . Ceci traite des problèmes ci-dessus. Cela ajoute également un léger retard à l'animation. Ainsi, si un utilisateur déplace rapidement la souris sur tous les liens, vous ne recevez pas un flux d'animation déplaisant de tous les liens.

Answer 2

Une façon d'éviter de tels problèmes consiste à utiliser stop () en conjonction avec fadeTo (), comme dans l'extrait de code ci-dessous:

$(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);
  });
});

J'espère que cela résoudra votre problème!