jQuery 取消和重置幻灯片动画
我正在编写一些 jQuery 来切换 div，在伪代码中，应该执行以下操作：
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);
});
})
上述修复所发生的情况是动画确实停止了，但是我的切换高度divs 在被告知停止的地方“卡住”了。就好像 div 正在向下滑动，我单击另一个项目触发“停止”，因此，该 div 现在认为它只有实际高度的一半。
有解决方法吗？
I'm writing some jQuery for toggling divs that, in pseudo code, should do the following:
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
There are multiple items that can be clicked (in this particular case, radio buttons).
I can get all this working (thanks to some help from the fine folks here on stockOverflow).
The one bug I still have is that if one clicks an item and then, before the process finishes, click another item, the animations begin stacking and getting confused. And I can break the display by quickly clicking back and forth between the trigger items. I've tried to fix this by implementing a 'when clicked, if things are animating, stop, and then hide them all to reset things':
$('.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);
});
})
What happens with the above fix is that the animations DO stop, but the height of my toggling divs gets 'stuck' at the point they were told to stop. It's as if the div was sliding down, I click a different item which triggers the 'stop' and, as such, that div is now thinking it's only half as tall as it really is.
Any ideas of a workaround for this?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您需要将其他参数传递给
stop方法：第一个参数 (
clearQueue) 告诉 jQuery 清除动画队列，停止任何排队的动画。第二个参数 (
gotoEnd) 告诉 jQuery 完成当前动画。You need to pass additional parameters to the
stopmethod:The first parameter (
clearQueue) tells jQuery to clear the animation queue, stopping any queued animations.The second parameter (
gotoEnd) tells jQuery to complete the current animation.较新的帖子是正确的...您应该清除队列，我也更改了我的答案以反映这一点。
尝试：
$togglePanesWrapper.children('.togglePane').hide().stop(true, true);http://docs.jquery.com/Effects/stop
The newer post is correct... you shoudl just clear the queue ive changeed my answer to reflect this as well.
try:
$togglePanesWrapper.children('.togglePane').hide().stop(true, true);http://docs.jquery.com/Effects/stop