如何正确启动此课程，以便在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(); 
    }); 
});