jQuery的菜單OnMouseEnter在和鼠標離開奇怪的行爲

Question

這是隱藏在懸停/顯示菜單項... 我的js的菜單我有這樣一個菜單：

<ul class="main"> 
     <li class="acro_jq_menu"> 
      <a href="" title="How to">How to one </a> 
      <ul> 
       <li>item21</li> 
       <li>ite222m1</li> 
       <li>item1</li> 
      </ul> 
     </li> 
     <li class="acro_jq_menu"> 
      <a href="" title="How to">How to Two </a> 
      <ul> 
       <li>item1</li> 
       <li>it2em1</li> 
       <li>it41em1</li> 
      </ul> 
     </li> 
    </ul> 

這是JavaScript的：

function slideMenu() { 
var items = $('.main li.acro_jq_menu'); 
     items.bind({ 
      mouseenter: function(e) { 
       $(this).find('>ul').css({ 
        'opacity':0 
       }).show().animate(

       { 
        'opacity':1 
       }, 
       500); 
      }, 
      mouseleave: function(e) { 
       $(this).find('>ul').fadeOut(100, function() { 
        $(this).hide(); 
       }) 
      } 
     }); 
} 

$(document).ready(function(){ 
     slideMenu(); 
    });​ 

一切工作正常，但有時當我的鼠標離開目前li這個列表項內容隱藏太久（超過2秒左右），有時內容根本沒有顯示。我認爲jQuery代碼有問題，但我無法弄清楚。

這裏的鏈接我的代碼的jsfiddle例如：link

Answer 1

嘗試停止在事件的所有動畫：

http://jsfiddle.net/6hZuV/4/

function slideMenu() { 
var items = $('.main li.acro_jq_menu'); 
     items.bind({ 
      mouseenter: function(e) { 
       $(this).stop(true, true).find('>ul').css({ 
        'opacity':0 
       }).show().animate(

       { 
        'opacity':1 
       }, 
       500); 
      }, 
      mouseleave: function(e) { 
       $(this).stop(true, true).find('>ul').fadeOut(100, function() { 
        $(this).hide(); 
       }) 
      } 
     }); 
}