javascript - MouseEnter/MouseLeave 事件未正确排队

Question

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

我试过使用链接到动画上的 .stop(true) 函数，但它似乎不起作用。

有什么建议吗？

$('.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');
        }
      });

http://jsfiddle.net/h3qacoez/1/

Answer 1

为什么不为此使用 CSS 和 :hover？ CSS 中的过渡还允许您为元素设置动画。除非您有支持旧浏览器的要求，否则这应该可以很好地工作，并且可以避免让您头疼的 JavaScript 问题和计时问题。

为了完整起见，这里有一个 Fiddle 展示了它的实际效果:http://jsfiddle.net/dPixie/q0tfxvwd/

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;
}

第一部分设置正常状态，第二部分设置在悬停期间。使用最大高度而不是高度，因为它允许子菜单为任意高度(只需确保 max.height 以像素为单位并且足够大以容纳任何子菜单)。

为什么？

不惜一切代价帮助某人解决问题是没有建设性的。有时重新考虑该方法是值得的。

用JS做菜单动画当然可以。但它对上述方法有什么补充吗？借助 CSS，您可以将渲染卸载到显卡上，使用内置悬停检测功能的浏览器，并使您的代码朝着新的 Web 标准发展。

除非您有非常特殊的需求，例如客户愿意为跨旧客户端的像素完美结果付费，或者非常复杂的动画取决于外部事件的时间等，否则通常不值得在 JS 中构建这些动画。如果你没有得到报酬让一切都一样，你就不应该这样做......