Problem with mouseenter/mouseleave and fading

Question

I'm using mouseenter/mouseleave on a div for fading it in and out.

The problem is when quickly hovering the div it results to some kind of queue where the div keeps fading several times.

Seems like I need to stop the effect like "on mousenter then stop fading out".

Any ideas?

Answer 1

You can use .stop(), which is documented here: http://api.jquery.com/stop/

$('#hoverme-stop-2').hover(function() {
  $(this).find('img').stop(true, true).fadeOut();
}, function() {
  $(this).find('img').stop(true, true).fadeIn();
});