Question

每当光标移动到页面的任何位置时，我都会想要显示一个元素，并在光标不活动一段时间后再次隐藏（除非光标悬停在所述元素上）。

这是我得到的最接近的，问题在于隐藏元素时，对于移动的每个像素，动画一遍又一遍地重复播放。我认为.stop（）可能是答案，但如果是，我无法弄清楚如何。

bkLib.onDomLoaded(function() {

setTimeout(function() {
    $("#footer").hide('blind', 500)
}, 5000);

$('html').mousemove(function() {
    if($("#footer").is(':hidden')) {
        $("#footer").show('blind', 500);
    }

    if($("#footer").is(':visible') && !$("#footer").is(':hover')) {
        setTimeout(function() {
            $("#footer").hide('blind', 500);
        }, 5000);
    }
});

});

Answer 1

尝试在设置另一个超时之前清除超时：

bkLib.onDomLoaded(function() {

var timeoutID = setTimeout(function() {
    $("#footer").hide('blind', 500)
}, 5000);

$('html').mousemove(function() {
    if($("#footer").is(':hidden')) {
        $("#footer").show('blind', 500);
    }

    if($("#footer").is(':visible') && !$("#footer").is(':hover')) {
        clearTimeout(timeoutID);
        timeoutID = setTimeout(function() {
            $("#footer").hide('blind', 500);
        }, 5000);
    }
});

});

Answer 2

尝试混合使用代码和这个东西：

$('#myelement').is(":animated")

所以你可以猜测它是否可见和目前正在发生的事情

使用JQuery移动光标时隐藏/显示元素的最佳方法

2 个答案: