Javascript MouseEnter/MouseLeave事件未正确排队

我在导航上有一个下拉动画，其中子菜单的显示/隐藏取决于用户在元素内/外悬停。我遇到的问题是，它们没有正确排队，因此当用户快速通过元素时，菜单保持打开状态

我尝试使用链接到动画上的.stoptrue函数，但它似乎不起作用

有什么建议吗

$('.navbar-nav > .menu-item-has-children').on({
        mouseenter: function() {
            console.log('Hovered In');
            $(this).children('.sub-menu').addClass('main-fix').stop(true, true).show('slide', {direction: 'up', duration: 250, easing: 'easeInQuint'}).removeClass('main-fix');
        },
        mouseleave:  function() {
            console.log('Hovered Out');
            $(this).children('.sub-menu').addClass('main-fix').stop(true, true).hide('slide', {direction: 'up', duration: 250, easing: 'easeInQuint'}).removeClass('main-fix');
        }
      });

为什么不使用CSS和：hover呢？CSS中的转换也允许您设置元素的动画。除非您有支持旧浏览器的需求，否则这应该可以很好地工作，并为您节省任何JavaScript头痛和时间问题

为了完整起见，这里有一把小提琴在演奏：

CSS的相关部分包括：

#navbar .navbar-nav .menu-item .sub-menu {
  ...
  /* no display: none! */
  max-height: 0;
  overflow: hidden;

  -webkit-transition: max-height 250ms ease-in-out;
  transition: max-height 250ms ease-in-out;
}

#navbar .navbar-nav .menu-item:hover .sub-menu {
  max-height: 1000px;
}

其中第一部分设置正常状态，第二部分在悬停期间。使用“最大高度”而不是“高度”，因为它将允许子菜单为任意高度。请确保“最大高度”以像素为单位，并且足够大，可以容纳任何子菜单

为什么？ 不惜任何代价帮助别人解决问题是没有建设性的。有时候，重新思考这种方法是值得的

使用JS制作菜单动画当然有效。但它是否为上述方法增加了什么？使用CSS，您可以将渲染卸载到图形卡上，使用内置的浏览器进行悬停检测，并使代码朝着新的web标准前进

---

除非您有非常特殊的需求，例如客户端愿意为遗留客户端的像素完美效果付费，或者根据外部事件的计时等非常复杂的动画，否则通常不值得在JS中构建这些动画。如果你没有得到报酬，让它一直保持不变，你就不应该这样做……

你在mouseleave事件上有一个持续时间：250，导致菜单项hide transition变为动画。如果更改为持续时间：0，它将立即隐藏。这就是你的意思吗？@BrettDeWoody这不是OP的意思。问题在于你的展示和隐藏。如果将其切换为slideDown和slideUp，代码工作正常。我添加了jQueryUI标记，它似乎与jQueryUI动画方法和jQueryFX有关queue@epascarello-我不明白你的意思？