Javascript 在进入和离开主链接时，如何保持下拉菜单子导航转换的一致性？

我创建了一个下拉菜单，其中每个主链接都附带了一个

mouseenter

和

mouseleave

事件，首先检查是否存在与链接相关联的子导航列表，然后将菜单滑入可见状态。如果您输入link 1并将下拉式幻灯片保留在中，然后将其滑出，则此操作正常。但是如果您输入link 1，然后将鼠标悬停在link 2上，则

slideUp（）

一致性已消失，理想情况下，我希望在再次运行新的

mouseenter

代码之前，确保活动菜单已关闭。有人能建议我如何做到这一点吗

链接到小提琴：

JS

var mainNav = $('.main-nav'),
    topLevelLinks = mainNav.children('li'),
    subNav = $('.sub-nav-panel'),
    subNavPanel,
    isActive = false,
    inner,
    innerLink;

topLevelLinks.on({
    mouseenter: function () {
        var el = $(this);

        if (el.children('.sub-nav').length > 0) {
            inner = el.children('.sub-nav');

            subNav.stop(true, true).slideDown(function () {
                inner.fadeIn();
            });
        }
    },
    mouseleave: function () {
        //make sure this finishes before mouseenter is run again?
        inner.fadeOut(function() {
            subNav.slideUp();
        });
    }
});

---

只有在没有子菜单仍然可见时，才需要调用subNav.slideUp（）。下面是一个使用现有代码的简单修复：它仍然不是完美的，但可能会帮助您

if (topLevelLinks.children('.sub-nav').filter(":visible").length === 0) {
    subNav.slideUp();
}

根据评论更新

---

一个小小的脑筋急转弯。。。所以我们不想调用mouseenter的动画，直到mouseleave的动画完成，反之亦然。您可以使用

promise（）

和

done（）。默认情况下，
promise（）
将在执行
done（）
之前等待元素的所有动画完成。查看JSFIDLE上的更新
嘿，谢谢，如果在我切换到新链接时将链接转换为子AV动画，然后像初始链接悬停时那样将新链接向下滑动，是否可能？嘿，你的新小提琴似乎没有.promise（）或.done（）函数？哦，忘了保存它。现在试试。另外，请查看hoverintent插件。这将使人们更容易使用菜单，因为它不像鼠标事件那样敏感。