我正在寻找我正在使用的导航菜单的解决方案。这是JSFiddle您可以在其中看到工作代码。
fadeIn 效果只需要在 nav-item
悬停时发生,但当鼠标从菜单的底部、左侧或右侧离开时会发生。
最佳答案
看起来您想要的是:当您将鼠标从一个选项卡移动到另一个选项卡时,您不希望发生淡出和淡入。
在这种情况下,这是因为您没有跟踪菜单是否打开。您应该仅在菜单未打开时进行淡入淡出,否则只需隐藏并显示而不淡入淡出。
代码:
var timer;
var isMenuOpen = false;
$('.nav-item').hover(
function() {
$('.subnav--main').hide();
$('.promoted-content--main').hide();
clearTimeout(timer);
if(isMenuOpen){
$(this).find('ul').show();
}
else{
isMenuOpen = true;
$(this).find('ul').fadeIn( 'slow' );
}
},
function() {
timer = setTimeout(function() {
$('.subnav--main').fadeOut( 'fast' );
$('.promoted-content--main').fadeOut( 'fast' );
isMenuOpen = false;
}, 1000);
}
);
还有 jsfiddle:http://jsfiddle.net/qdafe3uw/
关于javascript - fadeIn 在 mouseleave(setTimeout) 之后从头开始,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25772500/