菜單和子菜單按照不規律懸停時行爲不如預期

Question

我有一個水平菜單（列出爲列表），當您將鼠標懸停在其中一個列表項上時，它會爲列表項的子項設置一個dropmenu。

如果以「正常」速度將光標移動到菜單上，此功能正常工作。我遇到的問題是如果您不小心將光標移動到菜單上，菜單的行爲。它留下了以前懸停的元素，並且我必須將鼠標懸停在dropMenu上，直到它們都返回到初始狀態（高度：0）。

我的菜單jQuery是如下：

$('#templateNav > ul > li').bind({ 
     mouseenter: function() { 
      $(this).find(".dropMenu").clearQueue().animate({ 
       height: 250 
      }, 200); 
     }, 

     mouseleave: function() { 
      $(this).find(".dropMenu").clearQueue().height(0); 
     } 
    }); 

這裏是我的菜單代碼示例：

<div id='templateNav'> 
    <ul> 
     <li>Menu 1<span class='dropMenu'>...</span></li> 
     <li>Menu 2<span class='dropMenu'>...</span></li> 
     <li>Menu 3<span class='dropMenu'>...</span></li> 
    </ul> 
</div> 

任何想法？

Answer 1

看到這個http://jsbin.com/ukuqik/1

$('#templateNav > ul > li').bind({ 
    mouseenter: function() { 
     $(this).find(".dropMenu").stop(true,true).animate({ 
      height: 250 
     }, 200); 
    }, 

    mouseleave: function() { 
     $(this).find(".dropMenu").stop(true,true).animate({ 
      height: 0 
     }, 200); 
    } 
}); 

，更好的一點：http://jsbin.com/ukuqik/6

Answer 2

這裏是一個解決方案：

使用一個變量，並將其設置在動畫完成..喜歡的東西：

var isAnimating = false; 
mouseenter: function() { 
    isAnimating = true; // Here we start 
    $(this).find(".dropMenu").clearQueue().animate({ 
     height: 250 
    }, 200, function(){isAnimating=false}); // Now we are done with animation 
}, 
mouseleave: function() { 
    if(isAnimating == false) $(this).find(".dropMenu").clearQueue().height(0); 
} 

或者當你把鼠標移離使用可能會停止動畫。停止（）。