Как улучшить jQuery выпадающее меню анимации

Question

Я создал простое выпадающее меню jQuery, используя функции slideUp и slideDown. Он работает, если пользователь будет медленно нависнуть над каждым, позволяя предыдущему завершить, но это никогда не произойдет в действительности.

Как мне улучшить код, чтобы он был плавным переходом для каждого выпадающего списка?

Вот рабочая скрипка моего Дилема: 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(); 
    }); 
});