为悬停功能添加延迟

Question

我有这个代码触发一个大型菜单。

$('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> 

我想要做的就是添加一个简单的定时器到原来的悬停事件。这样，如果用户不小心碰到了一个标签，除非他们在那里坐了半秒钟左右，否则它不会起火。有什么建议么？？

Answer 1

jquery.hoverIntent.js正是你正在寻找的。

http://plugins.jquery.com/project/hoverIntent

Answer 2

你应该看看使用jQuery的 delay() function。

更新（见历史编辑）

好吧。现在我更好地理解你的问题。谢谢你的澄清。我认为这段代码可以做你想做的事情。你可以在这里的例子玩：http://jsfiddle.net/57eGD/

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

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

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

基本上，延迟（）不会为你工作，因为只有延迟事件，但它不允许被取消的事件。因此，即使您延迟了slideDown（）事件，它仍然会发生，如果用户鼠标悬停的话。因此，您必须使用允许取消的window.setTimeout。然而，（有点）棘手的部分是，你必须能够告诉超时取消。这是jQuery的data function发挥作用。该功能允许您将任何类型的数据附加到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')); 
}); 

我希望这可以帮助你！良好的学习经验对我来说也是如此。