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

我想要的很简单：

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

<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

似乎slideDown函数是在slideUp完成之前启动的。我已经将slideDown移动到了slideUp回调之外，并且得到了相同的反应。我已经处理了持续时间和延迟，但是仍然存在相同的问题。

-----编辑-----

我应该注意，我的目标是使容器在再次扩展之前完全收缩。

最佳答案

这是因为您需要在再次向下滑动之前先隐藏（）

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

http://jsfiddle.net/dYMx8/

关于jquery - 为什么jQuery slideUp()中的回调不等待动画完成？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13810423/