如何告诉.hover（）等待？
我有一个下拉菜单。 现在，当它滑落到多个层次时，我希望它在等待2秒之前增加等待时间，然后消失，所以当用户错误地打破.hover()时，用户可以重新进入。
可能吗？
我的幻灯片代码：
$('.icon').hover(function() { $('li.icon > ul').slideDown('fast'); }, function() { $('li.icon > ul').slideUp('fast'); });
这将使第二个函数在执行之前等待2秒（2000毫秒）
$('.icon').hover(function() { clearTimeout($(this).data('timeout')); $('li.icon > ul').slideDown('fast'); }, function() { var t = setTimeout(function() { $('li.icon > ul').slideUp('fast'); }, 2000); $(this).data('timeout', t); });
它还清除用户hover时的超时，以避免疯狂的行为。
但是，这不是一个非常优雅的方式。 你应该检查一下hoverIntent插件，它是为了解决这个问题而devise的。
我个人喜欢“hoverIntent”插件：
http://cherne.net/brian/resources/jquery.hoverIntent.html
从页面：hoverIntent是一个插件，试图确定用户的意图…就像一个水晶球，只有鼠标移动！ 它的工作原理就像jQuery的内置hover一样。 但是，不要立即调用onMouseOver函数，而要等到用户的鼠标放慢之后再进行调用。
为什么？ 延迟或防止意外的animation或阿贾克斯调用。 简单的超时工作适用于小范围，但是如果您的目标范围很大，它可能会执行而不pipe意图。
var config = { sensitivity: 3, // number = sensitivity threshold (must be 1 or higher) interval: 200, // number = milliseconds for onMouseOver polling interval over: makeTall, // function = onMouseOver callback (REQUIRED) timeout: 500, // number = milliseconds delay before onMouseOut out: makeShort // function = onMouseOut callback (REQUIRED) }; $("#demo3 li").hoverIntent( config )
configuration选项
灵敏度：如果鼠标在轮询间隔之间传输的像素数less于这个数量，那么将会调用“over”函数。 在最小敏感度阈值为1的情况下，鼠标不能在轮询间隔之间移动。 灵敏度越高，您就越有可能收到误报。 默认灵敏度：7
interval：读取/比较鼠标坐标之间的hoverIntent等待的毫秒数。 当用户的鼠标首先进入元素时，其坐标被logging下来。 “over”function最快可以在单个轮询间隔后调用。 将轮询间隔设置得更高将增加在第一次可能的“超出”呼叫之前的延迟，但是也增加到下一个比较点的时间。 默认时间间隔：100
结束：必需。 您想要调用的function。 你的函数接收和jQuery的hover方法相同的“this”和“event”对象。
timeout：调用“out”函数之前的一个简单的延迟，以毫秒为单位。 如果用户在超时过期之前将鼠标移回到元素上，则不会调用“out”函数（也不会调用“over”函数）。 这主要是为了防止暂时（无意）将用户从目标元素上移走的马虎/人类移动轨迹…给他们时间返回。 默认超时：0
out：必需。 你想调用的函数在鼠标上。 你的函数接收和jQuery的hover方法相同的“this”和“event”对象。 注意，如果在同一次运行中调用“over”函数，hoverIntent将只调用“out”函数。
一般的想法是使用setTimeout ，如下所示：
$('.icon').hover(function() { $('li.icon > ul').slideDown('fast'); }, function() { setTimeout(function() { $('li.icon > ul').slideUp('fast'); }, 2000); });
但是，如果用户将鼠标移出，然后再次快速进入鼠标，这可能会违反直觉，但这并不能解释用户再次hover时的超时时间。 这将需要额外的国家。
以下将停止触发2秒的滑动：
$('.icon').hover(function() { $('li.icon > ul').delay(2000).slideDown('fast'); }, function() { $('li.icon > ul').slideUp('fast'); });
$('.icon').on("mouseenter mouseleave","li.icon > ul",function(e){ var $this = $(this); if (e.type === 'mouseenter') { clearTimeout( $this.data('timeout') ); $this.slideDown('fast'); }else{ // is mouseleave: $this.data( 'timeout', setTimeout(function(){ $this.slideUp('fast'); },2000) ); } });
我认为这是你需要的代码：
jQuery( document ).ready( function($) { var navTimers = []; $('.icon').hover(function() { var id = jQuery.data( this ); var $this = $( this ); navTimers[id] = setTimeout( function() { $this.children( 'ul' ).slideDown('fast'); navTimers[id] = ""; }, 300 ); }, function () { var id = jQuery.data( this ); if ( navTimers[id] != "" ) { clearTimeout( navTimers[id] ); } else { $( this ).children( "ul" ).slideUp('fast'); } } ); });
或者你可以简单地使用转换：所有2s缓和。 确保你为不同的浏览器添加了-webkit，-moz和-o。
var timer; var delay = 200; $('#hoverelement').hover(function() { on mouse hover, start a timeout timer = setTimeout(function() { Do your stuff here }, delay); }, function() { Do mouse leaving function stuff here clearTimeout(timer); });
//编辑：instert代码
我想补充Paolo Bergantino，你可以做到这一点，没有数据attribut：
var timer; $('.icon').hover(function() { clearTimeout(timer); $('li.icon > ul').slideDown('fast'); }, function() { timer = setTimeout(function() { $('li.icon > ul').slideUp('fast'); }, 2000); });
