如何正確啓動此課程，以便在mouseleave上我的下拉列表可以向上滑動？

Question

我終於得到這個下拉動畫和行爲我想要的方式，但我有一個小錯誤，使它在一個下拉觸發器的初始mouseleave不會導致下拉滑動但只是凍結在適當的位置。除此之外，我是一個非常新的程序員，所以如果任何人有一些關於如何使這個運行更乾淨或使我的代碼更高效的技巧，我總是喜歡在我的代碼上受到專業批評。謝謝。

 /** Mega DropDown **/ 
/* Determine if the user is hovering over the trigger for more than .5sec and if there is already a drop-down menu showing. 
If there is then modify the containing elements height to match the new contained elements and if not then set the 
containing element to the correct height */ 
$(".cataDropDown").mouseenter(function() { 
    $this = $(this); //use currently selected ".cataDropdown" 

    var EleHt = ($this.children('ul').height()) + 29; //Get height of contained elements for slide event 
    var count = 0; 
    var onHoverTimer = setInterval(function() { 
     count += 1; //setInterval for hover timer 

     //If User hovers over trigger for more than .5 seconds - 
     if (count >= 1) { 
      clearInterval(onHoverTimer); //Clear counter 
      onHoverTimer = setInterval(300); 

      $(".cataDropDown").children('ul').animate({ opacity: '0' }, 200).hide(); //Give contained elements dimension but keep hidden with opacity property 
      $this.children('ul').show().css('opacity', '0'); //Give contained elements dimension but keep hidden with opacity property 
      $this.parents('div#menuContainer').stop(true, false).animate({ height: EleHt }, 400); //Open container to height of contained elements 
      $this.children('ul').stop(true, true).animate({ opacity: '1' }, 200); //show child elements (menu) 
      $this.addClass('menu-active') //add class "menu-active" to test if the drop-down is currently open 
     } 
    }, 300); 

    $(".cataDropDown").mouseleave(function() { 
     clearInterval(onHoverTimer); //Clear counter to prevent opening the menu by accident 
     onHoverTimer = setInterval(300); 

     if (!$this.hasClass('menu-active')) { 
      $(".cataDropDown").removeClass('menu-active'); 
      $this.parents('div#menuContainer').animate({ height: '27px' }, 400); 
      $('.cataDropDown > ul').stop().animate({ opacity: '0' }, 200, function() { 
       $(this).hide(); 
      }); 
     } else { 
      $this.parents('div#menuContainer').stop(true, false).animate({ height: EleHt }, 200); 
      $this.removeClass('menu-active'); 
      //window.console && console.log(EleHt); 
     } 
    }); 
}); 

編輯：作爲的jsfiddle要求 - http://jsfiddle.net/hUtAp/8/

Answer 1

的代碼你mouseleave()處理程序中是難辭其咎的。嘗試this simplified version：

$(".cataDropDown").mouseleave(function() { 

    clearInterval(onHoverTimer); //Clear counter to prevent opening the menu by accident 
    onHoverTimer = setInterval(300); 

    $(".cataDropDown").removeClass('menu-active'); 
    $this.parents('div#menuContainer').stop().animate({ 
     height: '27px' 
    }, 500); 
    $('.cataDropDown > ul').stop().animate({ 
     opacity: '0' 
    }, 200, function() { 
     $(this).hide(); 
    }); 
});