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

Best way to hide/show an element when cursor is moved using JQuery

本文关键字：元素 显示 最佳 方式 隐藏 JQuery 移动 光标 使用      更新时间：2023-09-26

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

这是我得到的最接近的，问题是当隐藏元素时，动画会一遍又一遍地播放，每移动一个像素。我想.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);
    }
});
});

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

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

尝试混合使用您的代码和以下内容：

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

因此，您可以猜测它是否可见和当前

上有问题
相关文章：