jquery - 为什么 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

看起来slideDown 函数在slideUp 完成之前就开始了。我已将 SlideDown 移到了 SlideUp 回调之外，并且得到了相同的 react 。我已经处理过持续时间和延迟，但仍然存在相同的问题。

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

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

Answer 1

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

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

http://jsfiddle.net/dYMx8/