我正在编写一些 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);
});
})
上述修复所发生的情况是,动画确实停止了,但是我的切换 div 的高度在被告知停止的地方“卡住”了。就好像 div 正在向下滑动,我单击另一个项目触发“停止”,因此,该 div 现在认为它只有实际高度的一半。
有解决方法吗?
您需要将附加参数传递给stop method http://docs.jquery.com/Effects/stop#clearQueuegotoEnd:
$togglePanesWrapper.children('.togglePane').hide().stop(true, true);
第一个参数(clearQueue
) 告诉 jQuery 清除动画队列,停止任何排队的动画。
第二个参数(gotoEnd
) 告诉 jQuery 完成当前的动画。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)