为什么jQuery slideUp()中的回调不等待动画完成？

Question

我想要的相当简单：

我有一个有背景的容器。容器内部是触发器和隐藏框，如下所示：

<div id="container">

<span id="box-1">Open 1</span> <span id="box-2">Open 2</span> <span id="box-3">Open 3</span> <span id="box-4">Open 4</span> <span id="box-5">Open 5</span> 

<div class="box box-1">Hi! I'm Box 1</div>
<div class="box box-2">Hi! I'm Box 2</div>
<div class="box box-3">Hi! I'm Box 3</div>
<div class="box box-4">Hi! I'm Box 4</div>
<div class="box box-5">Hi! I'm Box 5</div>

</div>

一旦点击了一个触发器，目标框就会滑下。如果某个框已经打开，则它会向上滑动，而新的目标框则会向下滑动。我在站点的不同部分使用了它，但是在jsfiddle中分享它有点复杂。下面是我无法正常工作的简单版本：

jsFiddle: slideUp and slideDown issue

在slideUp完成之前，slideDown函数似乎正在启动。我将slideDown移出了slideUp回调，得到了同样的反应。我已经使用了持续时间和延迟，但它仍然有相同的问题。

--编辑

我应该注意到，我的目标是让容器在再次扩展之前完全崩溃。

Answer 1

这是因为您需要在再次滑下之前隐藏()

$('.box').not(boxItem).slideUp(function(){
    $('.box'+boxItem).hide().slideDown();
});

http://jsfiddle.net/dYMx8/

Answer 2

这个问题已经6个月了，但我找到了问题的答案。使用$('.box').not(boxItem).slideUp(function()将调用slideUp函数4次，因为还有4个带有"box“类的其他div。我们只希望它被调用一次，因为只有一个div可以向上滑动。您应该跟踪当前打开的框，并将其用作选择器，而不是“.box”。

Answer 3

尝试停止动画：

$('.box').not(boxItem).stop(true, true).slideUp(function(){
    $('.box'+boxItem).slideDown();
});

传递true, true会清空动画队列，使动画“跳到末尾”

Fiddle

http://api.jquery.com/stop/