当鼠标静止一段时间时，使用jQuery隐藏div元素？

Question

我有一个视频广播网站，有一个菜单，应该在鼠标静止一段时间后隐藏（比如说10秒）。同时，当鼠标移动时，它应该重新出现。通过使用CSS和jQuery，实现此功能的最佳方法是什么？ 非常感谢。

- Maay

---

当鼠标移动到视频上时，您是否会收到鼠标移动事件？或者您是否使用了一个停止所有这些事件冒泡的插件？如果不能，最好使用显示视频的任何插件（我假设是Flash）来处理菜单。 - Douglas

Answer 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/

- karim79

---

太好了，这正是我在寻找的！我一直在研究mousemove事件，但就是想不通如何在其中设置Timeout。非常感谢你！ - Maay

为了更加优化，JQuery中的fadeOut(1000)和fadeIn(100)可以很好地替代hide()和show()。这里的时间只是示例。 - evolross