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麻煩和計時問題。

為了完整起見，下面是一個小提琴，它正在運行中： 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;
}

第一部分設置為正常狀態，第二部分設置為懸停期間。 使用最大高度代替高度，因為它將允許子菜單為任意高度（只需確保最大高度以像素為單位，並且足夠容納任何子菜單）。

為什么？

幫助某人不惜任何代價解決問題不是建設性的。 有時值得重新考慮該方法。

使用JS進行菜單動畫當然可以。 但這是否對上述方法有所補充？ 使用CSS，您可以將渲染工作卸載到圖形卡上，使用內置的懸停檢測瀏覽器並將代碼向新的Web標准發展。

除非您有非常特殊的需求，例如客戶願意為傳統客戶中的像素完美效果付費，或者取決於外部事件的定時等非常復雜的動畫，否則通常不值得在JS中構建這些動畫。 而且，如果您一直沒有賺錢使它保持不變，那您就不應該這樣做……