How do you cancel a jQuery fadeOut() once it has started?

Question

I have a basic div element to represent a message that I show for a few seconds and then fade it out using

$('#message').fadeOut(5000);

I want to be able to cancel the fade out if the user hovers their mouse over the div.

How can I cancel the fade out once the fadeOut method has started to fade the div?

My existing code, below, works if the mouse enters the div whilst it is being shown but I need to allow for if the user hovers over the div once it has started to fade.

$('#message').mouseenter(function() {
  clearTimeout(this.timeout);
});
$('#message').mouseleave(function() {
  this.timeout = setTimeout("$('#message').fadeOut(5000)", 3000);
});
$('#message').fadeIn(2000, function() {
  this.timeout = setTimeout("$('#message').fadeOut(3000)", 3000);
});

user_4344976 · Answer

In my case stop() merely didn't work at least in Firefox, after searching I figured out that It should be stop(true, true):

$('#message').mouseover(
    function () {
         $(this).stop(true, true).fadeOut();
    }
);

stop(): Stops the currently-running animation on the matched elements.

or even you can use finish() instead:

$('#message').mouseover(
    function () {
         $(this).finish().fadeOut();
    }
);

but there is a side effect about finish(), it stops all other running animations too.

finish(): Stops the currently-running animation, remove all queued animations, and complete all animations for the matched elements.

How do you cancel a jQuery fadeOut() once it has started?

3 Answers