Menu
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); }); 
218
jQuery Effect fadeOut() Method The fadeOut() method gradually changes the opacity, for selected elements, from visible to hidden (fading effect). Note: Hidden elements will not be displayed at all (no longer affects the layout of the page). Tip: This method is often used together with the fadeIn() method.
The jQuery fadeOut() method is used to fade out a visible element. Syntax: $(selector). fadeOut(speed,callback);
The fadeIn method displays the element by fading it to opaque. The fadeOut method hides the element by fading it to transparent. Note – jQuery does the fading by changing the opacity of the element.
fadeOut() the place will be removed at once. . show(duration) and . hide(duration) animate the size of element (also the opacity) to 100% and 0% and the place of elements is also animated in that duration.
Check out the stop function
http://docs.jquery.com/Effects/stop#clearQueuegotoEnd
200
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
