javascript - 可以使用 jQuery 获得 "mouseover for X seconds"功能吗？

Question

我目前有几个连续的元素具有触发某些动画的鼠标悬停事件。我的问题是，如果有人快速连续地将鼠标悬停在几个元素上，动画就会变得有点疯狂。

我很好奇是否有一种方法可以让鼠标悬停事件仅在鼠标悬停在某个元素上一定时间(比如 250 毫秒)时触发。这可以用 jQuery 完成吗？

Answer 1

我建议您为此使用 setTimeout:

(function ($) {
    var t;
    $('ul li').hover(function() {
        var that = this;
        window.clearTimeout(t);
        t = window.setTimeout(function () {
            $(that).animate({opacity: .5}, 'slow').animate({opacity: 1});
          }, 250);
    });
}(jQuery));

如果有多个项目快速连续激活，超时将覆盖超时 ID，从而防止第一个不应启动的项目开始动画。

它不需要任何神秘的插件(尽管 hoverIntent 可能会提供一些您可能想要使用的不错的附加功能)和 window.setTimeout无处不在。

更新

我更新了代码示例以使其正常工作。昨天是凭内存写的，但没有正确调用 setTimeout。另请参阅 this jsFiddle供引用。

我看到的问题是，即使您离开 .所以你也可以添加一个 $('ul').mouseleave(function() { window.clearTimeout(t) }); 来防止这种情况。

问候丹尼尔