Javascript 可能有；鼠标悬停X秒”；使用jQuery的功能？

我当前在一行中有几个元素，它们具有触发一些动画的mouseover事件。我的问题是，如果有人连续快速地在几个元素上移动鼠标，动画就会变得有点疯狂

---

我很好奇是否有一种方法可以让mouseover事件仅在鼠标在元素上停留一定时间（比如250毫秒）时才会触发。这可以通过jQuery实现吗？

我建议您查看jQuery HoverIntent插件（1.4k缩小版）。以下是链接：。这是一个很棒的插件，我已经用过很多次了

下面是一些代码示例：

var config = {    
     over: makeTall, // function = onMouseOver callback (REQUIRED)    
     timeout: 500, // number = milliseconds delay before onMouseOut    
     out: makeShort // function = onMouseOut callback (REQUIRED)    
};

$("#demo3 li").hoverIntent( config )

---

我建议您查看jqueryhoverintent插件（1.4k缩小）。以下是链接：。这是一个很棒的插件，我已经用过很多次了

下面是一些代码示例：

var config = {    
     over: makeTall, // function = onMouseOver callback (REQUIRED)    
     timeout: 500, // number = milliseconds delay before onMouseOut    
     out: makeShort // function = onMouseOut callback (REQUIRED)    
};

$("#demo3 li").hoverIntent( config )

是的： 要完成此操作，请在onMouseover函数中放置一个

setTimeout

，并在mouseout上放置一个

cleartimout

您可能需要多一点逻辑性，但这就是关键所在

是的： 要完成此操作，请在onMouseover函数中放置一个

setTimeout

，并在mouseout上放置一个

cleartimout

---

您可能需要更多的逻辑，但这就是它的核心部分

我建议您为此使用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可能会提供一些您可能想要使用的附加功能），并且在任何地方都受支持

更新

我更新了代码示例以使其正常工作。。我昨天从内存中写了这篇文章，但是setTimeout调用没有完全正确。。另请参阅以供参考

我看到的问题是，即使您离开了鼠标，它也会执行悬停动画。因此，您还可以添加一个

$（'ul'）.mouseleave（function（）{window.clearTimeout（t）}）以防止出现这种情况

问候Daniel
我建议您为此使用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可能会提供一些您可能想要使用的附加功能），并且在任何地方都受支持

更新

我更新了代码示例以使其正常工作。。我昨天从内存中写了这篇文章，但是setTimeout调用没有完全正确。。另请参阅以供参考

我看到的问题是，即使您离开了鼠标，它也会执行悬停动画。因此，您还可以添加一个
$（'ul'）.mouseleave（function（）{window.clearTimeout（t）}）以防止出现这种情况

问候Daniel
这里有一个
stop（）
的示例，希望对您有所帮助：

没有
stop（）
：


使用
stop（）
清理动画队列：

下面是一个
stop（）
的示例，希望对您有所帮助：

没有
stop（）
：


使用
stop（）
清理动画队列：

Ha！比我快2秒。：-）以名誉的名义删除。不必要地使用插件。OPs问题可以用8-10行代码轻松解决，而不必再加载另一个JavaScript文件。@Tigraine，我想你应该重新阅读SO的“我什么时候应该否决投票”标准-<每当你遇到一篇极其草率、不费力气的帖子，或者一个答案显然是错误的，甚至可能是危险的，请投反对票。你的反对票是基于你的偏好。这是一个可行的解决方案，许多其他人都会乐于使用。我认为我的否决票不是基于偏好，但我不会发表数千篇文章，说你应该a）保持低复杂性b）不要在你的网站中包含数千个JS文件以保持快速..哈！比我快2秒。：-）以名誉的名义删除。不必要地使用插件。OPs问题可以用8-10行代码轻松解决，而不必再加载另一个JavaScript文件。@Tigraine，我想你应该重新阅读SO的“我什么时候应该否决投票”标准-<每当你遇到一篇极其草率、不费力气的帖子，或者一个答案显然是错误的，甚至可能是危险的，请投反对票。你的反对票是基于你的偏好。这是一个可行的解决方案，许多其他人都会乐于使用。我认为我的否决票不是基于偏好，但我不会发表成千上万的文章，说你应该a）保持低复杂性b）不要在你的网站中包含数千个JS文件以保持快速。
stop（）
可以作为一种替代方案，您不必下载任何插件，看看它（）我将如何使用stop来完成此操作？编辑您的帖子并在处理元素事件的代码上盖章，我将查看您是否可以在代码中使用此功能，并将发布一个示例来解决您的问题。
stop（）
也可以是一种选择，您不必下载任何插件，看看它（）我将如何使用stop来完成此操作？编辑您的帖子，并在处理元素事件的代码上盖章，我将查看您是否可以在代码中使用此选项，并将发布一个示例来解决您的问题。Hrrm，我仍然不知道如何使用
stop
来延迟事情。它不会延迟任何事情，只是从jQuery的动画堆栈中清除了一些内容，我以为你在动画中对几个元素强调光标时遇到了问题
stop
经常被用来解决这个问题（顺便说一句，让我知道你在我写的示例中是否强调了菜单上的光标？两个都试试）Hrrm，我仍然不知道如何使用
stop
来延迟事情。它不会延迟任何事情，只是扫掉了a