CODEWITHSUNDEEP
javascriptjquerycssmenushow-hide
Maay
Maay

Reputation: 575

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.

Upvotes: 13

Views: 10010

Answers (1)

karim79
karim79

Reputation: 342635

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/

Upvotes: 26

Related Questions