Question

我正在编写一些用于切换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正在向下滑动，我点击了另一个触发'stop'的项目，因此，div现在认为它只有它的一半高。

有关解决方法的任何想法吗？

Answer 1

您需要将其他参数传递给stop method：

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

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

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

Answer 2

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

尝试：

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

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

jQuery取消和重置幻灯片动画

2 个答案: