[英]jQuery - delay with stop functions
考虑以下导航布局
初级导航
二次导航
子导航(仅在主导航或辅助导航翻转时显示
我需要在fadeOut调用中有足够长的延迟,以使用户将鼠标从主导航移到子导航,并且一旦移过子导航,我就需要取消fadeOut悬停。 将鼠标悬停在第二个导航项上时,请重复该想法。 (我知道如何添加延迟,但不知道如何取消悬停)
TIA
<div class="primary">
<ul class="primary common">
<li class="primary category" rel="politics">
<a href="#">POLITICS</a>
</li>
</ul>
</div>
<div class="secondary">
<ul class="secondary common">
<li class="secondary category" rel="news">
<a href="#">NEWS</a>
</li>
</ul>
</div>
<div style="display: block; height: 20px; width: 100px; overflow: hidden;">
<div id="politics" class="sub" style="display: none;">
<ul class="sub common">
<li class="sub">
<a href="#">POLITICS SUBNAV</a>
</li>
</ul>
</div>
<div id="news" class="sub" style="display: none;">
<ul class="sub common">
<li class="sub">
<a href="#">NEWS SUBNAV</a>
</li>
</ul>
</div>
</div>
$('.category').hover(
function() {
var subnav = $(this).attr('rel');
$('#' + subnav).fadeIn('slow');
}, function() {
var subnav = $(this).attr('rel');
$('#' + subnav).fadeOut('slow');
});
试试jQuery Hover Intent插件-http: //cherne.net/brian/resources/jquery.hoverIntent.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.