可以使用 jQuery 实现“鼠标悬停 X 秒”功能吗？

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 .. 另请参阅此 jsFiddle以供参考。

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

问候丹尼尔