Utilisation de setTimeout pour retarder une animation jQuery

Question

Je travaille sur certaines transitions sur l'image lorsqu'un utilisateur appuie sur le bouton pour passer à l'image suivante. Quand il y a plusieurs images côte à côte qui sont très étroites, ces images seront toutes en transition en même temps. Je vérifie donc la largeur des images et ajoute les plus minces à un tableau, puis exécute la transition sur chaque objet du tableau. Je voulais créer un peu de retard entre l'animation de chaque image du tableau, j'essaie donc de lancer jQuery.animate après un délai d'une seconde.

Voici comment j'ai essayé de faire fonctionner le délai d'attente sans succès:

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

Je l'ai obtenu en utilisant l'exemple de fermeture de CMS. Mais maintenant, je rencontre un nouveau problème. La transition ne se produit qu'avec la deuxième image. Quand il y a trois images, il va animer l'image 1, retarder, animer l'image 2, animer l'image 3. Il n'y a pas de délai entre 2 et 3.

Voici le nouveau code:

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

En regardant votre code, je pense que vous avez un autre problème de fermeture , peut-être le problème le plus courant que j'ai vu lorsque les gens travaillent avec des boucles et des fonctions imbriquées.

La variable i à laquelle fait référence votre fonction de rappel setTimeout , est identique (), car JavaScript ne comporte que des fonctions block-scope ), et au moment où ces fonctions sont exécutées de manière asynchrone, la boucle est déjà terminée, et la variable i contient le jeu . longueur - 1 pour tous les cas où setTimeout est utilisé.

Comme d'habitude, essayez de capturer la variable i en utilisant une autre fermeture:

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

Utiliser le délai d'attente est une astuce lorsqu'il s'agit d'animation / effet chronométré.

Je n'ai pas testé votre code, mais en le parcourant, j'ai remarqué que vous utilisez setTimeout sans rien pour les effacer.

Que se passe-t-il lorsque les utilisateurs déclenchent des événements pendant le "délai"? Vous devez également mettre en place quelque chose pour gérer cela.

Désolé, je n'ai pas de réponse pour vous maintenant, peut-être quand j'ai plus de temps plus tard ou que quelqu'un propose une solution plus élégante.

Answer 3

jquery fadeOut http://docs.jquery.com/Effects/fadeOut vous permet créer un rappel, fonction que vous pouvez exécuter à la fin du fadeOut. Donc, si vous le souhaitez, vous pouvez enchaîner les fondus pour qu’un appel soit terminé, puis le suivant. Si ce n'est pas ce que vous recherchez, je peux mal interpréter votre question.

En outre, dans l'exemple 3, je pense que vous souhaitez l'écrire comme ceci sans qu'une définition de fonction ne soit transmise à setTimeout, car cela ne fera rien.

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