jquery animare elementi multipli

Question

che sto cercando di fare quanto segue:

Ho due insiemi di elementi DOM di una pagina. Tutti gli elementi del primo set portano il display-element di classe, e la seconda serie di elementi portano il edit-element classe.

Ora ho un pulsante (id = edit-button). Quando clicco questo pulsante, voglio tutta la display-elements per fade out, e di apparire tutta la edit-elements.

ho naturalmente fatto:

$('#edit-button').click(function(){
    $('.display-element').fadeOut(300, function() {
        $('.edit-element').fadeIn(300);
    });
});

ho trovato con mia grande sorpresa che questo non ha funzionato come previsto. Questo è quello che è successo:. Non appena il primo elemento con classe display-element sbiadito fuori, tutto il edit-elements iniziato dissolvenza in

Ora c'è un modo semplice (forse qualcosa nella documentazione che ho perso) con cui posso avere tutto il edit-elements iniziare dissolvenza in solo dopo che tutti display-elements hanno sbiadito?

Grazie
JRH

Answer 1

Perché questo accada, davvero? Voglio dire, sembra, che si stanno avviando le animazioni allo stesso tempo (c'è solo una chiamata alla .fadeOut dopo tutto, giusto?). Credo che, questo è perché $ () produce un array e quando si chiama .fadeOut, itera jQuery attraverso l'array ed esegua qualsiasi Svolge per ciascuno dei suoi elementi. A partire dal primo. Dal momento che il callback viene "attaccato" ad ogni animazione, si vede l'effetto visibile della prima richiamata.

Credo che, si potrebbe eludere questo scorrendo la matrice degli elementi restituiti da soli e fare in modo, che si allega la richiamata solo per l'ultimo.

$('#edit-button').click(function(){
    var display_elements = $('.display-element');
    var len = display_elements.length;
    for (var i = 0; i < len-1; i++) {
        $(display_elements[i]).fadeOut(300); // no callback
    }
    $(display_elements[len-1]).fadeOut(300, function() {
        $('.edit-element').fadeIn(300);
    }); // last element - attach callback
});

Mi dispiace se il codice è spento, devo ammettere, che il mio javascript-fu non è molto forte:)

Answer 2

Beh, non avendo trovato alcun 'metodo API abile', ho deciso di questo:

$('#edit-button').click(function() {
    var displays = $('.display-element');
    var counter = 0;
    var max = displays.length;
    displays.fadeOut(300, function() {
        counter++;
        if( counter>=max ) $('.input-element').fadeIn(300);
    }
});

Questo è in sostanza la risposta di @ shylent, con piu 'javascript-fu':)

Answer 3

La soluzione è quella di utilizzare un setTimeout sulla dissolvenza in funzione

$('#edit-button').click(function(){
    $('.display-element').fadeOut(300);
setTimeout("$('.edit-element').fadeIn(300);", 300);
});

Questa funzione javascript ritarderà il grilletto della la dissolvenza in funzione per 300 millisecondi

Answer 4

Ho appena incontrato un problema simile e ho trovato l'opzione di callback "passo" ha prodotto il comportamento desiderato.

  

passo:. Una funzione da chiamare dopo ogni fase dell'animazione

http://api.jquery.com/animate/

scorrere fino alla demo per l'utilizzo passaggio e vedrete come vi permetterà di chiamare animare su un singolo oggetto quindi utilizzare passo per aggiornare il resto il set in ogni fase dell'animazione. In questo modo si dispone di un solo richiamata sparato quando l'animazione completa.