带下拉菜单的jQuery延迟功能

<ul id="mainNav"> 
    <li> <a href="#" class="greenTheme">MainNav</a> 
    <ul class="subNav gTheme"> 
     <li class="first"><a href="#">SubNav1</a><span></span></li> 
     <li><a href="#">SubNav2</a><span></span></li> 
    </ul> 
    </li> 
</ul>

我正在开发一个带有jQuery悬停功能的下拉菜单。我需要延迟隐藏功能。我正在使用下面的一段代码。带下拉菜单的jQuery延迟功能

//Show/Hide 
$('#mainNav > li').each(function(e){ 
$(this).hover(function(){ 
    $(this).find('ul.subNav').show(); 
}, function(){ 
    $(this).find('ul.subNav').delay(100000).hide();  
    }); 
});

我在这里使用了延迟函数，但它不像预期的那样工作。请帮忙。提前致谢。

来源

2011-12-20 Lokesh Yadav

我会第一个提到[hoverIntent]（http://cherne.net/brian/resources/jquery.hoverIntent.html）。 – Blazemonger 2011-12-20 15:08:30

要添加show或hide了jQuery动画队列必须使用动画的持续时间（例如1毫秒）

$(this).find('ul.subNav').delay(100000).hide(1);

http://api.jquery.com/show/

当提供的持续时间，.show（）变得一种动画方法。 .show（）方法同时动画化匹配元素的宽度，高度和不透明度。

来源

2011-12-20 15:10:09 jantimon

只是一个建议，你可以使用HoverIntent，它会好得多。示例：http://www.thatsquality.com/articles/creating-delayed-drop-down-menus-in-jquery-without-losing-accessibility

来源

2011-12-20 15:12:54

您可以通过添加持续时间将隐藏添加到动画队列。如上所述，没有任何持续时间，它不会成为队列或“堆栈”的一部分。看看这个的jsfiddle： http://jsfiddle.net/mkprogramming/hyEC5/#base

//Show/Hide 
$('#mainNav > li').each(function(e){ 
    $(this).hover(function(){ 
    $(this).find('ul.subNav').show(); //fadeIn(); 
    }, function(){ 
    $(this).find('ul.subNav').delay(1000).hide(1); //fadeOut(); 
    }); 
});

由于您使用jQuery的我会用fadeIn()和fadeOut一个更加专业的效果。

来源

2011-12-20 15:27:26 sirmdawg

带下拉菜单的jQuery延迟功能

回答

相关问题