如何改善jQuery下拉菜單動畫

Question

我已經使用slideUp和slideDown函數創建了一個簡單的jQuery下拉菜單。 如果用戶將鼠標緩慢懸停在每一個上，讓前一個完成，則該方法有效，但實際上不會發生。

我將如何改進代碼，以便每個下拉列表都能順利過渡？

這是我的困境的工作提琴： jsfiddle ，下面是代碼：

的HTML

<div id="header">
  <a id="item1" class="item" href="">Item 1</a>
  <a id="item2" class="item"  href="">Item 2</a>
</div>

<div id="box1">box1</div>
<div id="box2">box2</div>

的CSS

#header{
    width:100%;
    height:50px;
    background:blue;
    text-align:right;
}

.item{
    color:#fff;
    width:50px;
    height:50px;
    display:inline-block;
    background:gray;
}

#box1{
    width:200px;
    height:100px;
    background:gray;
    display:none;
    float:right;
}

#box2{
    width:200px;
    height:100px;
    background:gray;
    display:none;
    float:right;
}

jQuery的

$('#item1').hover(function(){
   $('#box1').stop().slideDown();
}, function(){
   $('#box1').stop().slideUp();
});

$('#item2').hover(function(){
   $('#box2').stop().slideDown();
}, function(){
   $('#box2').stop().slideUp();
});

Answer 1

指定滑動效果的速度。
可能的值：

1. 毫秒
2. 慢
3. 快速

Answer 2

檢查這種很棒的方法，讓您僅將鼠標懸停在動畫上而不是過濾后，這將解決您的問題。

 $('#box1').filter(':not(:animated)').slideUp();

Answer 3

關鍵是使用promise()直到動畫結束為止。

您可以在此處查看其工作方式： http ： //jsfiddle.net/mcXBB/4/

我還將您的事件更改為更靈活的方式，使您可以以更簡單的方式處理更多菜單位置：

<div id="header">
    <a id="item1" class="item" rel="#box1" href="">Item 1</a>
    <a id="item2" class="item" rel="#box2" href="">Item 2</a>
</div>

<div id="box1" class="boxes" >box1</div>
<div id="box2" class="boxes" >box2</div>

$('#header a')
.mouseenter( function() {
    var boxId = $(this).attr('rel');
    $('.boxes').promise().done( function() {
        $(boxId).slideDown();
    });

})
.mouseleave(function() {
    var boxId = $(this).attr('rel');
    $('.boxes').promise().done( function() {
        $(boxId).slideUp();
    });
});