jQuery - Fading animation on hover

Question

Hi!

I have a little jQuery animation which fades in a link when hovering an :

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

But if I quickly mouse my mouse in and out of the image, the new animation is always added to the queue and when I stop I can see the link pulsating for a while.. I tried using .stop(true), but then sometimes the fade in effect doesn't work at all (or just up to some opacity value less than 1). What can I do?

Thanks, Eric

Answer 1

The best way is to use hoverIntent plugin. This deals with the issues above. It also adds a slight delay to the animation so if a user happens to quickly move the mouse over all the links you do not get an ugly animation flow of all the links.

Answer 2

One way to prevent such problems occuring is to use stop() in conjunction with fadeTo(), as in the snippet below:

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

Hope this solves your issue!