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

score 49 · Accepted Answer · answered Sep 14 '09 at 12:45

49

Check out the stop function

http://docs.jquery.com/Effects/stop#clearQueuegotoEnd

answered Sep 14 '09 at 12:45

PetersenDidIt

25,562
3
67
72

4

nice! using stop, this gets yo back to normal for the mouseenter function: $(this).stop().animate({opacity:'100'}); – daddywoodland Sep 14 '09 at 12:48
I can't believe I didn't spot that one in the jQuery docs! It must be a Monday. Thanks. – David Glenn Sep 14 '09 at 13:33
1

Specifically, @daddywoodland's .stop().animate({opacity:'100'}) combo is what allows any fadIn/fadeOut to restart based on your trigger. Works great. – cbmtrx Oct 27 '15 at 15:00
This link no longer works and is the reason that links alone are not allowed on StackOverflow. – PRMan Oct 30 '20 at 21:37

score 27 · Answer 2 · answered Sep 14 '09 at 12:55

27

Also, you can test if an element is in the middle of an animation using the :animated selector:

$('#message').mouseover(
    function () {
      if($(this).is(':animated')) {
         $(this).stop().animate({opacity:'100'});
      }
    }
);

answered Sep 14 '09 at 12:55

karim79

339,989
67
413
406

Muhammad Musavi · Answer 3 · 2019-07-03T06:45:50.640

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 Answers3

Linked