jQuery annullamento e resettando animazioni di diapositive

Question

Sto scrivendo un po 'di jQuery per div non girevoli che, in pseudo-codice, dovrebbe fare il seguente:

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

Ci sono diversi elementi che possono essere cliccato (in questo caso particolare, pulsanti di opzione).

Posso ottenere tutto questo lavoro (grazie a qualche aiuto da belle persone qui su stockOverflow).

L'unico errore che ho ancora è che se uno fa clic su un elemento, quindi, prima che il processo termina, fare clic su un altro elemento, le animazioni iniziano accatastamento e ottenere confuso. E posso rompere la visualizzazione facendo clic rapidamente avanti e indietro tra gli elementi di innesco. Ho cercato di risolvere questo problema mediante l'attuazione di un 'quando si fa clic, se le cose stanno animando, arrestare, e poi tutti Nascondi per ripristinare le cose':

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

            });
    })  

Quello che succede con la correzione di cui sopra è che le animazioni si fermano, ma l'altezza dei miei div non girevoli viene 'bloccato' nel punto in cui è stato detto di smettere. E 'come se il div scivolava verso il basso, fa clic su un elemento diverso, che fa scattare il 'stop' e, come tale, che div è ora pensando che è solo la metà alto come è in realtà.

Tutte le idee di una soluzione per questo?

Answer 1

È necessario passare parametri aggiuntivi alla stop metodo :

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

Il primo parametro (clearQueue) dice a jQuery per cancellare la coda di animazione, fermandosi ogni coda animazioni.

Il secondo parametro (gotoEnd) dice a jQuery per completare l'animazione corrente.

Answer 2

Il post più recente è corretto ... si shoudl solo cancella la coda di Ive changeed la mia risposta per riflettere questo pure.

Prova:

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

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