How to stop executing a fadeOut() while hovering over a element, using Jquery?

Question

Hi All,

I was wondering how I can get this piece of code to stop execution while I'm hovering over '.child'? Here is the code I'm working with, see below:

$('.child').live('mouseleave', function(){ 
    $('.child').delay(2300).fadeOut(200);
    $(this).removeClass('child');
});

Much Appreciated. Thanks

Answer 1

Use stop:

$('.child').live('mouseover', function(){ 
    $('.child').stop(true, true); // Stops the current animation
    $('.child').addClass('child');
});

stop(true, true); Stops the current animation and skips to the end of the animation queue for that object. So just add the class back again that you were fading out and it should work.