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

javascript, jquery, user-interface

Solution

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.

Problem

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.

Original source