Question

Let say (i simplify) i have 4 div with content…
i like to fade/hide them if the mouse is left unmove for 2 sec
and when the mouse mouve again… let quikly make everything appear again…

how simple is that to make in jquery ?

i am not really used to timetout and mouse.. more css used to !

---

I google for the “concept” and find that : Hide div element with jQuery, when mouse isn't moving for a period of time?

i will investigate if work !

Answer 1

You would need to create a run-a-way timer which restarts on every mousemove.

$(document).bind('mousemove', function() {
    var $somediv = $('#somediv');

    return function() {
        if(!$somediv.is(':visible'))
            $somediv.fadeIn('slow');

        this.tID && clearInterval(this.tID);
        this.tID = setTimeout(function() {
            $somediv.fadeOut('slow');
        }, 2000);
    };
}());

Demo: http://www.jsfiddle.net/ByrKk/