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

Posted 2023-03-06

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

【英文标题】：Hide div element with jQuery, when mouse isn't moving for a period of time?

【发布时间】：2011-05-17 09:13:30

【问题描述】：

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

【问题讨论】：

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

【参考方案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()。时间就是例子。