3

我正在编写一些用于切换 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 现在认为它只有实际高度的一半。

对此有任何解决方法的想法吗？

4

2 回答 2

4

您需要将其他参数传递给该stop方法：

$togglePanesWrapper.children('.togglePane').hide().stop(true, true);

第一个参数 ( clearQueue) 告诉 jQuery 清除动画队列，停止任何排队的动画。

第二个参数 ( gotoEnd) 告诉 jQuery 完成当前动画。

于 2009-12-10T16:27:52.947 回答
2

较新的帖子是正确的......你应该清除队列我改变了我的答案以反映这一点。

尝试：

$togglePanesWrapper.children('.togglePane').hide().stop(true, true);

http://docs.jquery.com/Effects/stop

于 2009-12-10T16:26:22.413 回答