CODEWITHSUNDEEP
javascriptjqueryuser-interface
TIMEX
TIMEX

Reputation: 271704

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.

Upvotes: 9

Views: 5058

Answers (1)

Crescent Fresh
Crescent Fresh

Reputation: 116980

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.

Upvotes: 22

Related Questions