jquery - 如果将鼠标悬停2秒钟以上，则显示其他内容吗？

这是我已将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>

最佳答案

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

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.