Utilizzo di setTimeout per ritardare un'animazione jQuery

Question

Sto lavorando ad alcune transizioni sull'immagine quando un utente preme il pulsante per passare all'immagine successiva. Quando ci sono più immagini una accanto all'altra che sono molto strette, quelle immagini passeranno tutte contemporaneamente. Quindi controllo la larghezza delle immagini e aggiungo quelle sottili a un array e quindi eseguo la transizione su ciascun oggetto dell'array. Volevo creare un piccolo ritardo tra l'animazione di ogni immagine dell'array, quindi sto cercando di eseguire jQuery.animate dopo un timeout di 1 secondo.

Ecco i modi in cui ho provato a far funzionare il timeout senza successo:

1.

for (i=0; i < set.length; i++) {
    if (i != 0) {
        setTimeout(function() { set[i].transitionOut($('#gallery'), 562) }, 100);
    } else {
        set[i].transitionOut( $('#gallery'), 562 );
    }
}

2.

for (i=0; i < set.length; i++) {
    if (i != 0) {
        function tempTransition() {
            set[i].transitionOut( $('#gallery'), 562 );
        }
        setTimeout(tempTransition, 100);
    } else {
        set[i].transitionOut( $('#gallery'), 562 );
    }
}

3.

for (i=0; i < set.length; i++) {
    if (i != 0) {
        setTimeout('function() { set[i].transitionOut($("#gallery"), 562) }', 100);
    } else {
        set[i].transitionOut( $('#gallery'), 562 );
    }
}

transitionOut ():

jQuery.fn.transitionOut = function(parent, height) {
    this.animate({
        height: '0',
        top: height + 'px'
    }, function() {
        $(this).remove();
    });
}

L'ho fatto funzionare usando l'esempio di chiusura di CMS. Ma ora sto incontrando un nuovo problema. La transizione avviene solo con la seconda immagine. Quando ci sono tre immagini, l'animazione dell'immagine 1, il ritardo, l'animazione dell'immagine 2, l'animazione dell'immagine 3. Non ci sono ritardi tra 2 e 3.

Ecco il nuovo codice:

for (i=0; i < set.length; i++) {
    (function(i) {
        if (i != 0) {

            function tempTransition() {
                set[i].transitionOut( $('#gallery'), 562 );
            }
            setTimeout(tempTransition, 200);
        } else {
            set[i].transitionOut( $('#gallery'), 562 );
        }
    })(i);
}

Answer 1

Guardando il tuo codice penso che tu abbia ancora un altro problema di chiusura , forse il problema più comune che ho visto quando le persone lavorano con loop e funzioni nidificate.

La variabile i a cui fa riferimento la tua funzione di callback setTimeout , è la stessa ( perché JavaScript ha solo l'ambito della funzione, non block-scope ) e quando queste funzioni vengono eseguite in modo asincrono, il ciclo è già terminato, e la variabile i conterrà set. lunghezza - 1 per tutti i casi in cui viene utilizzato setTimeout .

Come al solito, prova a catturare la variabile i usando un'altra chiusura:

for (var i=0; i < set.length; i++) {
  (function (i) {
    if (i != 0) {
        setTimeout(function() { set[i].transitionOut($('#gallery'), 562) }, 100);
    } else {
        set[i].transitionOut( $('#gallery'), 562 );
    }
  })(i);
}

Answer 2

L'uso del timeout è una cosa ingannevole quando si tratta di animazione / effetto a tempo.

Non ho testato il tuo codice ma sfogliandolo, ho notato che stai usando setTimeout senza nulla per cancellarli.

Cosa succede quando gli utenti attivano eventi durante il "ritardo"? Devi implementare qualcosa anche per gestirlo.

Scusa, non ho una risposta per te adesso, forse quando avrò più tempo dopo o qualcuno uscirà con una soluzione più elegante.

Answer 3

jquery fadeOut http://docs.jquery.com/Effects/fadeOut ti consente creare un callback, che è una funzione che è possibile eseguire al termine di fadeOut. Quindi, se vuoi, puoi concatenare le dissolvenze insieme, quindi quando uno finisce chiama il successivo. Se non è quello che stai cercando, potrei aver letto male la tua domanda.

Inoltre, nell'esempio 3, penso che tu voglia scriverlo in questo modo e non far passare una definizione di funzione a setTimeout in quanto non farà nulla.

setTimeout('set[i].transitionOut($("#gallery"), 562)', 100);