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

【问题标题】：If mouse over for over 2 seconds then show else don't?如果鼠标悬停超过 2 秒，则显示否则不显示？
【发布时间】：2012-07-01 02:15:51
【问题描述】：

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

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

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

如果用户在 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>

【问题讨论】：

jQuery - How to tell .hover() to wait?的完全重复
@T.J.Crowder 如果您阅读了这个问题，那么 OP 并没有确切地问这个问题。
@ThomasClayson：显然他们是。同样的问题，同样被接受的答案。

标签： jquery html css timer slidedown

【解决方案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');
    }
});

See it in action.

【讨论】：

@xDazz 感谢乔恩和 xDazz。向下滑动效果很好，但鼠标滑出时它不会向后滑动？我错过了还是做错了什么？
尝试去掉第二个函数中的 if else 块。你真的不需要它们。如果删除if else，调用这些方法不会产生任何不利影响。这可能是它不再向上滑动的原因。 :)
@ThomasClayson 好吧，现在它只上下滑动一次，然后就变得不活跃了。奇怪
@user1266515：修复了一个小错误并添加了 JSFiddle 链接。看起来怎么样？
@Jon 感谢您分享使用 setTimeout 背后的一些创造力。它也帮助了我。

【解决方案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);
});

【讨论】：