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

打开1打开2打开3打开4打开5
你好我是1号包厢
你好我是2号包厢
你好我在3号包厢
你好我是4号包厢
你好我是5号包厢

单击触发器后，目标框会向下滑动。如果一个盒子已经打开，它会向上滑动，而新的目标盒子会向下滑动。我在站点的另一个部分使用了它，但是在JSFIDLE中共享它有点复杂。我无法正确使用的简单版本如下：

slideDown函数似乎是在slideUp完成之前启动的。我把slideDown移到slideUp回调之外，我得到了同样的反应。我已经处理了工期和延迟问题，但仍然存在同样的问题

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

---

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

尝试停止动画：

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

传递

true，true

将清除动画队列并使动画“跳到末尾”

---

尝试停止动画：

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

传递

true，true

将清除动画队列并使动画“跳到末尾”

---

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

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

---

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

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

---

这个问题已经问了6个月了，但我找到了问题的答案。使用

$（'.box'）.not（boxItem）.slideUp（function（）

将调用slideUp函数4次，因为类“box”还有4个其他div。我们只希望调用一次，因为只有一个div可以向上滑动。您应该跟踪当前打开的框，并将其用作选择器，而不是“.box”。

这个问题已经6个月了，但我找到了问题的答案。这是使用

$（'.box'）。而不是（boxItem）。slideUp（函数（）

将调用slideUp函数4次，因为类“box”还有4个其他div。我们只希望调用一次，因为只有一个div可向上滑动。您应该跟踪当前打开的框，并将其用作选择器，而不是“.box”。

我用编辑添加了更多信息查看我的答案。这是您想要的吗？我用编辑添加了更多信息查看我的答案。这是您想要的吗？@dcp3450在你的小提琴上，我可以打开多个菜单项。使用我的代码，一次只能打开一个菜单项。这不是问题吗？@dcp3450在你的小提琴上，我可以打开多个菜单项。使用我的代码，一次只能打开一个菜单项。这不是问题吗？可能不仅仅是因为函数被调用了4次，而是一个或多个菜单项s已被隐藏，因此它立即调用“done”回调可能不仅仅是因为函数被调用了4次，而是一个或多个框已被隐藏，因此它立即调用“done”回调