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

指定幻灯片效果的速度可能的值：

毫秒
慢
快

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

如何改进jQuery下拉菜单动画

3 个答案: