jQuery取消和重置幻灯片动画 [英] jQuery cancelling and resetting slide animations

问题描述

我正在编写一些用于切换div的jQuery，这些伪代码应执行以下操作:

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).

我可以完成所有这些工作(感谢stockOverflow上的优秀人员的帮助).

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);                

            });
    })  

上述修复的结果是动画确实停止了，但是我切换的div的高度在被告知停止的那一点上被卡住了".就像div向下滑动一样，我单击另一个触发停止"的项目，因此，该div现在认为它只有实际高度的一半.

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?

推荐答案

您需要将其他参数传递给

You need to pass additional parameters to the stop method:

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

第一个参数(clearQueue)告诉jQuery清除动画队列，停止所有排队的动画.

The first parameter (clearQueue) tells jQuery to clear the animation queue, stopping any queued animations.

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

The second parameter (gotoEnd) tells jQuery to complete the current animation.

这篇关于jQuery取消和重置幻灯片动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！