Javascript jQuery-带停止函数的延迟
考虑以下导航布局Javascript jQuery-带停止函数的延迟,javascript,jquery,navigation,hover,delay,Javascript,Jquery,Navigation,Hover,Delay,考虑以下导航布局 主导航 辅助导航 副导航(仅在翻滚时显示 主要或次要导航的 我需要在淡出呼叫中有足够长的延迟,以便用户将鼠标从主导航移到子导航,一旦在子导航上,我需要取消悬停淡出。当悬停在辅助导航项目上时重复这个想法。(我知道如何添加延迟,但不知道如何取消悬停) 短暂性脑缺血发作 $('.category')。悬停( 函数(){ var subnav=$(this.attr('rel'); $('#'+subnav).fadeIn('slow');
主导航
辅助导航
副导航(仅在翻滚时显示 主要或次要导航的
我需要在淡出呼叫中有足够长的延迟,以便用户将鼠标从主导航移到子导航,一旦在子导航上,我需要取消悬停淡出。当悬停在辅助导航项目上时重复这个想法。(我知道如何添加延迟,但不知道如何取消悬停) 短暂性脑缺血发作
-
-
-
-
$('.category')。悬停(
函数(){
var subnav=$(this.attr('rel');
$('#'+subnav).fadeIn('slow');
},函数(){
var subnav=$(this.attr('rel');
$('#'+subnav).fadeOut('slow');
});
试试jQuery Hover Intent插件-我实际上已经看过了,但是没有看到它有什么帮助,因为它没有停止Hover淡出的下半部分
<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');
});