Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Jquery: how to make something fade out when mouse is idle. When mouse moves again, It fadesIn!

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.

like image 648
TIMEX Avatar asked Oct 14 '09 10:10

TIMEX


People also ask

How to set fadeOut time in jQuery?

The jQuery fadeOut() method is used to fade out a visible element. Syntax: $(selector). fadeOut(speed,callback);

How to fadeOut div in jQuery?

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.

How does jQuery fadeOut work?

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.

How to stop fadeOut jQuery?

stop(). animate({opacity:'100'}) combo is what allows any fadIn/fadeOut to restart based on your trigger.


1 Answers

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.

like image 159
Crescent Fresh Avatar answered Oct 07 '22 17:10

Crescent Fresh