jquery - 如果鼠标悬停超过 2 秒，则显示否则不显示？

Question

这是我在悬停时应用于 div 的 jQuery 幻灯片功能，以便向下滑动按钮。

它工作得很好，只是现在每次有人进出它时，它都会不断上下波动。

我想如果我在它上面放一个一两秒的延迟计时器会更有意义。

仅当用户在 div 上超过一两秒时，我将如何修改函数以运行向下滑动？

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js "></script>
<script type="text/javascript">

$("#NewsStrip").hover(
function () {
    $("#SeeAllEvents").slideDown('slow');    },
function () {
    $("#SeeAllEvents").slideUp('slow');
});

</script>

Answer 1

您需要在鼠标悬停时设置一个计时器，并在激活幻灯片或鼠标悬停时清除它，以先发生者为准：

var timeoutId;
$("#NewsStrip").hover(function() {
    if (!timeoutId) {
        timeoutId = window.setTimeout(function() {
            timeoutId = null; // EDIT: added this line
            $("#SeeAllEvents").slideDown('slow');
       }, 2000);
    }
},
function () {
    if (timeoutId) {
        window.clearTimeout(timeoutId);
        timeoutId = null;
    }
    else {
       $("#SeeAllEvents").slideUp('slow');
    }
});

在行动中看到它。

Answer 2

var time_id;

$("#NewsStrip").hover(
function () {
    if (time_id) {
        clearTimeout(time_id);
    } 
    time_id = setTimeout(function () {
        $("#SeeAllEvents").stop(true, true).slideDown('slow');
    }, 2000);
}, function () {
    if (time_id) {
        clearTimeout(time_id);
    } 
    time_id = setTimeout(function () {
        $("#SeeAllEvents").stop(true, true).slideUp('slow');
    }, 2000);
});