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

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 move. What is the best way to perform that, by using css and jQuery? Thank you in advance.

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/