CODEWITHSUNDEEP
javascriptjquery
David Glenn
David Glenn

Reputation: 24522

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

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

Upvotes: 50

Views: 33197

Answers (3)

Muhammad Musavi
Muhammad Musavi

Reputation: 2696

In my case, merely using stop() 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.

Read more here.

Upvotes: 5

karim79
karim79

Reputation: 342635

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

Upvotes: 27

PetersenDidIt
PetersenDidIt

Reputation: 25620

Check out the stop function

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

Upvotes: 49

Related Questions