如何使用Jquery下拉菜单延迟隐藏菜单？

我有一个工作正常的下拉菜单，但我希望如此，如果我将鼠标hover在菜单上，它不会立即再次隐藏。 所以基本上我想要一秒钟的延迟。

我读过有关setTimeout的内容，但不确定它是否是我需要的？

$('#mainnav a').bind('mouseover', function() { $(this).parents('li').children('ul').show(); }); $('#mainnav a').bind('mouseout', function() { $(this).parents('li').children('ul').hide(); }); 

Answer 1

setTimeout正是您所需要的。

 $('#mainnav a').bind('mouseout', function() { var menu = this; setTimeout(function() { $(menu).parents('li').children('ul').hide(); }, 1000); }); 

Answer 2

对于mouseout，我会在hide（）调用之前添加一个链式动画：

 $('#mainnav a').bind('mouseout', function() { $(this).parents('li').children('ul').animate({opacity:0.99}, 2000).hide(); }); 

这将延迟2秒。

Answer 3

将“slow”指定为要显示和隐藏的参数。 来自JQuery Docs 。

 $('#mainnav a').bind('mouseover', function() { $(this).parents('li').children('ul').show("slow"); }); $('#mainnav a').bind('mouseout', function() { $(this).parents('li').children('ul').hide("slow"); });