我想要的很简单:
我有一个带有背景的容器。容器内部有触发器和隐藏框,如下所示:
<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 。我已经处理过持续时间和延迟,但仍然存在相同的问题。
-----编辑-----
我应该注意,我的目标是让容器在再次扩展之前完全折叠。
最佳答案
这是因为你需要在再次向下滑动之前隐藏()
$('.box').not(boxItem).slideUp(function(){
$('.box'+boxItem).hide().slideDown();
});
关于jquery - 为什么 jQuery SlideUp() 中的回调不等待动画完成?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13810423/