Question

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

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

它不是一个正确的脚本，但我只是想要发生类似的事情？

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

如果有人反驳我的任务，那么它将非常有帮助。

我已经根据按钮点击使菜单消失了，但是现在我非常希望当鼠标移动超过5秒时隐藏菜单...

Answer 1

在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);
});

Answer 2

试试这个：

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

    var t = setTimeout(function(){
        //Has not been moved
        $('#menu').hide();
    }, delay);
});

Answer 3

function notMouseMove() {
   $("#menu").hide();
}
var timer = setTimeout(notMouseMove, 3000);

$(document).on('mousemove', function () {
    clearTimeout(timer);
    timer = setTimeout(notMouseMove, 3000);
});

Answer 4

滚动你自己的插件：

$.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'));
            }
        });
    });
};

FIDDLE

无鼠标移动3秒后发生的事件

4 个答案: