I have a div called "#top". I would like it to fade out when the mouse is idle for 3 seconds. When the mouse moves again, make it appear (fade, of course)
Does anyone know how to do this?
Thanks a lot.
The jQuery fadeOut() method is used to fade out a visible element. Syntax: $(selector). fadeOut(speed,callback);
jQuery Effect fadeOut() MethodThe 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 . fadeOut() method animates the opacity of the matched elements. Once the opacity reaches 0, the display style property is set to none , so the element no longer affects the layout of the page. Durations are given in milliseconds; higher values indicate slower animations, not faster ones.
stop(). animate({opacity:'100'}) combo is what allows any fadIn/fadeOut to restart based on your trigger.
Use setTimeout
, saving the return value somewhere (to cancel it with clearTimeout
when the mouse moves again):
var timer;
$(document).mousemove(function() {
if (timer) {
clearTimeout(timer);
timer = 0;
}
$('#top:visible').fadeIn();
timer = setTimeout(function() {
$('#top').fadeOut()
}, 3000)
})
You'll want this inside $(document).ready()
or the like.
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