当鼠标一段时间没有移动时，用jQuery隐藏div元素？

【问题标题】：Hide div element with jQuery, when mouse isn't moving for a period of time?当鼠标一段时间没有移动时，用jQuery隐藏div元素？
【发布时间】：2011-05-17 09:13:30
【问题描述】：

我有一个广播视频网站，有一个菜单，当鼠标有一段时间没有移动（比如说 10 秒）时，它应该被隐藏。同样，它应该会随着鼠标移动而出现。使用 css 和 jQuery 执行此操作的最佳方法是什么？先感谢您。

【问题讨论】：

当鼠标移到视频上时你会得到鼠标移动事件吗？或者您是否正在使用一个插件来阻止所有这些事件冒泡？如果你不能最好地使用任何插件（我假设是 Flash）正在显示视频来处理菜单。

标签： javascript jquery css menu show-hide

【解决方案1】：

看看mousemove 事件。你可以试试这样：

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/

【讨论】：

太好了，这就是我要找的！我正在查看 mousemove 事件，但不知道如何在其中设置 Timeout。非常感谢！
为了更加美观，JQuery fadeOut(1000) 和 fadeIn(100) 可以很好地代替 hide() 和 show()。时间就是例子。