javascript - fadeIn 在 mouseleave(setTimeout) 之后从头开始

Question

我正在寻找我正在使用的导航菜单的解决方案。这是JSFiddle您可以在其中看到工作代码。

fadeIn 效果只需要在 nav-item 悬停时发生，但当鼠标从菜单的底部、左侧或右侧离开时会发生。

Answer 1

看起来您想要的是:当您将鼠标从一个选项卡移动到另一个选项卡时，您不希望发生淡出和淡入。

在这种情况下，这是因为您没有跟踪菜单是否打开。您应该仅在菜单未打开时进行淡入淡出，否则只需隐藏并显示而不淡入淡出。

代码:

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/