如果将鼠标悬停2秒钟以上，则显示其他内容吗? [英] If mouse over for over 2 seconds then show else don't?

问题描述

这是一个jQuery滑动功能，我已将其应用于悬停的div上以将按钮向下滑动.

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秒钟以上，则显示其他内容吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！