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

Answer 1

Check out the stop function

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