jQuery cancelamento e redefinir animações de slides

Question

Eu estou escrevendo alguns jQuery para alternar divs que, em pseudo-código, deve fazer o seguinte:

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

Existem vários itens que podem ser clicados (neste caso particular, botões de rádio).

eu posso obter todos este trabalho (graças à ajuda de multa pessoal aqui na stockOverflow).

A um bug ainda tenho é que, se um clica em um item e, em seguida, antes de terminar o processo, clique em outro item, as animações começam empilhar e ficando confuso. E eu posso quebrar a tela, clicando rapidamente para trás e para frente entre os itens de gatilho. Eu tentei corrigir isso através da implementação de um 'quando clicado, se as coisas são animação, stop, e depois escondê-los todos para repor as coisas':

$('.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);                

            });
    })  

O que acontece com a correção acima é que as animações param, mas a altura dos meus divs alternando fica 'preso' no ponto eles foram orientados a parar. É como se a div foi deslizando para baixo, eu clicar em um item diferente que desencadeia a 'stop' e, como tal, que div agora está pensando que é apenas metade tão alto como ela realmente é.

Todas as ideias de uma solução alternativa para isso?

Answer 1

Você precisa passar parâmetros adicionais ao stop método :

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

O primeiro parâmetro (clearQueue) diz jQuery para limpar a fila de animação, parando as animações na fila.

O segundo parâmetro (gotoEnd) diz jQuery para completar a animação atual.

Answer 2

O mais recente post é correto ... você shoudl apenas limpar a fila de ive changeed minha resposta para refletir isso também.

tentar:

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

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