6

我的脚本中有一些菜单，我想要一个 jquery 脚本，当没有鼠标不移动 3 秒时，它会导致菜单隐藏。

我知道这真的是一个愚蠢的问题，但我无法在任何地方得到任何答案..

它不是一个合适的脚本，但我只是想如果发生这样的事情？

$("#target").notmousemove(function(event) {
$('#menu').hide();
},delay(500));

如果有人 cud 回复我的请求，那将非常有帮助..

我已经在按钮单击的基础上使菜单消失了，但是现在我宁愿希望菜单在鼠标不移动超过 5 秒时隐藏...

4

4 回答 4

9

setTimeout在mouseMove处理程序中使用。如果鼠标在超时到期之前再次移动，只需清除它clearTimeout并再次重新启动超时。

所以像：

var timeoutid = 0;
$("#someRootElement").mousemove(function() {
    if (timeoutid) {
       clearTimeout(timeoutid);
       timeoutid = 0;
    }
    timeoutid = setTimeout(myFunctionToHideMenu, 5000);
});

编辑：事实上，您甚至不需要检查计时器是否已经在运行。尝试停止无效的计时器 ID 或已停止的计时器不会导致错误。所以你可以简单地：

var timeoutid = 0;
$("#someRootElement").mousemove(function() {
    clearTimeout(timeoutid);
    timeoutid = setTimeout(myFunctionToHideMenu, 5000);
});
于 2013-01-28T16:21:18.150 回答
2

尝试这个：

var t;
var delay = 3000; //Ms delay 
$("#target").mousemove(function(){
    clearTimeout(t);

    var t = setTimeout(function(){
        //Has not been moved
        $('#menu').hide();
    }, delay);
});
于 2013-01-28T16:22:41.350 回答
1 
function notMouseMove() {
   $("#menu").hide();
}
var timer = setTimeout(notMouseMove, 3000);

$(document).on('mousemove', function () {
    clearTimeout(timer);
    timer = setTimeout(notMouseMove, 3000);
});
于 2013-01-28T16:22:25.457 回答
0

只需滚动您自己的插件：

$.fn.notmousemove = function(time, callback) {
    return this.each(function(i,ele) {
        $(ele).on({
            mouseenter: function() {
                $(this).data('nomousetimer', setTimeout(callback, time));
            },
            mousemove: function() {
                clearTimeout($(this).data('nomousetimer'));
                $(this).data('nomousetimer', setTimeout(callback, time));
            },
            mouseleave: function() {
                clearTimeout($(this).data('nomousetimer'));
            }
        });
    });
};

小提琴

于 2013-01-28T16:34:34.743 回答