jQuery取消和重置幻灯片动画
我正在编写一些用于切换div的jQuery，在伪代码中，应该执行以下操作：
item.click check to see if the div I want to expand is hidden if so slideup all of the divs when finished... slide down the one I want to expose 可以单击多个项目（在此特定情况下，单选按钮）。
我可以完成所有这些工作（感谢stockOverflow上的优秀人员的帮助）。
我仍然遇到的一个问题是，如果单击某个项目，然后在该过程完成之前单击另一个项目，则动画开始堆叠并变得混乱。 我可以通过在触发项之间快速点击来打破显示。 我试图通过实现’点击时，如果事物是动画，停止，然后隐藏它们以重置事物’来解决这个问题：
$('.toggleTriggersWrapper .toggleTrigger') .click(function(){ var $togglePanesWrapper = $(this).closest('.toggleTriggersWrapper').next('.togglePanesWrapper').eq(0); var IDtoShow = '#' + this.className.match(/toggle\-.+?\b/); var $IDtoShow = $(IDtoShow); /* the next 3 lines are my attempted 'fix' */ if($togglePanesWrapper.children('.togglePane').is(":animated")) { $togglePanesWrapper.children('.togglePane').hide().stop(); }; $togglePanesWrapper.children('.togglePane').not(IDtoShow).slideUp('fast', function(){ /* great fix for dealing with multiple animations as found here: http://www.gmarwaha.com/blog/2009/06/09/jquery-waiting-for-multiple-animations-to-complete/ */ var wait = setInterval(function() { if( !$togglePanesWrapper.children('.togglePane').is(":animated") ) { console.log('if is animated'); clearInterval(wait); $togglePanesWrapper.children('.togglePane').not(IDtoShow).hide(); $togglePanesWrapper.children(IDtoShow).slideDown('slow'); } }, 200); }); })
上面修复的结果是动画停止了，但是我的切换div的高度在他们被告知停止时被“卡住”。 这就好像div正在向下滑动，我点击了一个不同的项目，触发了“停止”，因此，div现在认为它只有它实际的一半高。
有关解决方法的任何想法吗？
您需要将其他参数传递给stop方法 ：
$togglePanesWrapper.children('.togglePane').hide().stop(true, true);
第一个参数（ clearQueue ）告诉jQuery清除动画队列，停止任何排队的动画。
第二个参数（ gotoEnd ）告诉jQuery完成当前动画。
较新的post是正确的…你只是清除队列我已经改变了我的答案以反映这一点。
尝试：
$togglePanesWrapper.children('.togglePane').hide().stop(true, true);