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

似乎slideUown函数在slideUp完成之前启动。我已经将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个其他div与类“box”。我们只希望它被调用一次，因为只有一个div可以向上滑动。您应该跟踪当前打开的框，并将其用作选择器而不是“.box”。

Answer 3

尝试停止动画：

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

传递true, true将清除动画队列并使动画“跳到最后”

Fiddle

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

为什么jQuery slideUp（）中的回调没有等待动画完成？

3 个答案:

Fiddle