为什么？

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问题和时间问题。

为了完整性，这里有一个小提琴，显示它在行动：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中构建这些动画。如果你没有得到报酬，那就不应该一直这样做......

MouseEnter / MouseLeave事件未正确排队

1 个答案:

为什么？