为什么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和slideDown问题

似乎slideDown函数在slideUp完成之前启动.我已经将slideDown移到了slideUp回调之外,我得到了同样的反应.我已经处理了持续时间和延迟,但它仍然有同样的问题.

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

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

Answer 1

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

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

http://jsfiddle.net/dYMx8/