如何告诉.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); });