当鼠标在一段时间内不移动时，使用 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屋！