Jquery 向悬停函数添加延迟

我有一个触发超级菜单的代码

    $('li#locations a').hover(function(){
$('#locationsSuperNav').slideDown();
}); 

$('#locationsSuperNav').mouseleave(function(){
$(this).slideUp();
});

这是html

<div id="nav">
<ul id="nav_509815">
<li><a href="/Culture/cultureHome">Culture</a></li>
<li><a href="/Advantage/advantageHome">Advantage</a></li>
<li><a href="/Testimonials/parentstories">Testimonials</a></li>
<li><a href="/Programs/programs">Programs</a></li>
<li class="locations" id="locations"><a href="/Locations/locationsHome">Locations</a></li>
<li><a href="/Careers/careers">Careers</a></li>
</ul>
<div id="locationsSuperNav" class="" style="display: none;">All the content goes here</div>
</div>

所有内容都在这里

---

我想做的是在原始的悬停事件中添加一个简单的计时器。这样，如果用户不小心触碰了a标签，除非他们坐在那里半秒钟左右，否则不会触发a标签。有什么建议吗

jquery.hoverIntent.js

正是您想要的

您应该看看如何使用jQuery

更新（请参见历史编辑）

好的。现在我更了解你的问题了。谢谢你的澄清。我认为这段代码符合您的要求。您可以在此处使用一个示例：

基本上，delay（）不适用于您，因为它只会延迟事件，但不允许取消事件。因此，它对您不起作用，因为即使您延迟slideDown（）事件，如果用户将鼠标移到上面，它仍然会发生。因此，您必须使用允许取消的。然而，（有点）棘手的部分是，你必须能够告诉超时取消。这就是jQuery发挥作用的地方。此函数允许您将任何类型的数据附加到DOM元素。因此，在您的情况下，您应该将其附加到您关心触发事件的元素（在本例中为

$（'li#locations a'）

），如果您在事件触发之前离开该元素，则可以取消。您可以调整650以获得更长或更短的延迟

另一件需要注意的事情是hover（）应该在这里工作，而不是mouseenter和mouseleave。应该是这样的：

$('li#locations a').hover(function() {
    var curElement = this;
    var timeoutId = setTimeout(function() {
       $('#locationsSuperNav').slideDown();
    }, 650);

    // Use data so trigger can be cleared.
    $(curElement).data('timeoutId', timeoutId);
}, function() {
    clearTimeout($(this).data('timeoutId'));
});

---

我希望这对你有帮助！我也有很好的学习经验。

是的，hover适合这些类型的东西。从我所能读到的内容来看，mouseout事件发生延迟。我需要延迟的是悬停事件。还有其他建议吗？选择hoverintent插件做这类事情很好出于某种原因延迟功能对hover事件不起作用，而hoverintent插件看起来也不起作用。我需要延迟初始悬停，而不是鼠标移动。我遇到的另一个问题是hover函数显示了一个单独的div。如果我读取正确，hover意图将固定在父元素上。当用户离开li时，我需要让#locationsSuperNav保持打开状态。还有其他建议吗？@mmsa-更新了答案。这有帮助吗？如果没有，我将尝试第三轮-p确保您拥有最新的jQuery。延迟为1.4+@JasCav，谢谢更新。很抱歉给你带来了困惑。下面是正在发生的事情。我有一个网站上的标准导航ul。当用户将鼠标悬停在li#位置a上时，我需要显示一个隐藏在页面上的div。基本上是创建一个大菜单。当用户的鼠标离开该分区时，mouseleave事件隐藏megamenu。该分区会扩展屏幕的整个宽度。希望对你有所帮助。@mmsa-你能在帖子中添加一些HTML吗？

$('li#locations a').hover(function() {
    var curElement = this;
    var timeoutId = setTimeout(function() {
       $('#locationsSuperNav').slideDown();
    }, 650);

    // Use data so trigger can be cleared.
    $(curElement).data('timeoutId', timeoutId);
}, function() {
    clearTimeout($(this).data('timeoutId'));
});