javascript - 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();
});