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

Question

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.

Answer 1

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.

Answer 2

Sorry but I am new here... how do I insert that into the html? Thanks :)