如果鼠标悬停超过 2 秒然后显示其他不?

问题描述

这是我在悬停时应用于 div 的 jQuery 滑动函数，以便向下滑动按钮.

Here is a jQuery slide function I have applied to a div on hover in order to slide a button down.

它工作正常，只是现在每次有人进出它时，它都会上下摆动.

It works fine except that now everytime someone moves in and out of it, it keeps bobbing up and down.

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

I figured if I put a one or two second delay timer on it it would make more sense.

仅当用户在 div 上超过一两秒时，我将如何修改函数以运行幻灯片?

How would I modify the function to run the slide down only if the user is on the div for over a second or two?

<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>

推荐答案

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

You need to set a timer on mouseover and clear it either when the slide is activated or on mouseout, whichever occurs first:

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

查看实际效果.

这篇关于如果鼠标悬停超过 2 秒然后显示其他不?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！