Hide div element with jQuery, when mouse isn't moving for a period of time?

Question

I have a broadcasting video site, with a menu, which should be hidden, when mouse isn\'t moving for a while (lets say 10 seconds). As well, it should appears back, with mouse mo

Answer 1

Take a look at the mousemove event. You can try something like this:

var i = null;
$("#element").mousemove(function() {
    clearTimeout(i);
    $("#menu").show();
    i = setTimeout(function () {
        $("#menu").hide();
    }, 10000);
}).mouseleave(function() {
    clearTimeout(i);
    $("#menu").hide();  
});

Demo: http://jsfiddle.net/AMn9v/6/