Hide div element with jQuery, when mouse isn't

问题:

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.

回答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/