如何改进 jQuery 下拉菜单动画答案

【问题标题】：How to improve jQuery drop down menu animation如何改进 jQuery 下拉菜单动画
【发布时间】：2013-04-30 10:26:03
【问题描述】：

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

【问题讨论】：

标签： javascript jquery jquery-animate slide

【解决方案1】：

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

毫秒
慢
快

【讨论】：

【解决方案2】：

关键是使用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();
    });
});

【讨论】：

好的，这听起来像我应该去的方向，但它仍然无法在小提琴上工作，如果你快速将鼠标悬停在两者上，你会看到两个我无法拥有的下拉菜单。跨度>
解决方案应该是延迟对象：api.jquery.com/category/deferred-object 稍后我会尝试修复我的解决方案，因为它更复杂。

【解决方案3】：

检查这个很棒的方式让你悬停只适用于过滤而不是动画，我猜这将解决你的问题。

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

【讨论】：