使用jQuery隐藏div元素，当鼠标不移动一段时间？ [英] Hide div element with jQuery, when mouse isn't moving for a period of time?

问题描述

我有一个广播视频网站，有一个菜单，应该隐藏，当鼠标不移动一段时间（让说10秒）。同样，它应该显示回来，用鼠标移动。什么是执行的最好的方法，通过使用CSS和jQuery？
提前谢谢。

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.

推荐答案

查看 mousemove 事件。您可以尝试这样：

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();  
});

示范： http://jsfiddle.net/AMn9v/6/

这篇关于使用jQuery隐藏div元素，当鼠标不移动一段时间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！