Mit SetTimeout man eine jQuery-Animation Verzögerung

Question

Ich arbeite auf dem Bild einig aus Übergängen, wenn ein Benutzer den Knopf drückt, um zum nächsten Bild zu bewegen. Wenn mehrere Bilder nebeneinander, die sehr eng sind, diese Bilder werden alle Übergang zur gleichen Zeit. So überprüfe ich die Breite auf den Bildern und die dünn diejenigen zu einem Array hinzuzufügen und dann auf jedes Objekt in der Anordnung den Übergang laufen. Ich wollte eine kleine Verzögerung zwischen der Animation eines jeden Bildes in der Matrix schaffen, damit ich versuche, meine jQuery.animate nach einer 1 Sekunde Timeout zu laufen.

Hier ist die Art und Weise habe ich versucht, ohne Erfolg das Timeout zum Laufen zu bringen:

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

Ich habe es mit dem CMS Schließung Beispiel arbeiten. Aber jetzt bin ich in ein neues Problem ausgeführt wird. Der Übergang geschieht nur mit dem zweiten Bild. Wenn es drei Bilder ist, wird es gehen animiert Bild 1, Verzögerung, animiert Bild 2, animieren Bild 3. Es zwischen 2 und 3 keine Verzögerung ist.

Hier ist der neue 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

Mit dem auf den Code suchen Ich glaube, Sie haben noch eine weitere Schließung Problem , vielleicht das häufigste Problem, das ich gesehen habe, wenn Menschen mit Loops und verschachtelten Funktionen arbeiten.

Die i Variable, die Ihre setTimeout Callback-Funktion beziehen, der gleichen (, weil JavaScript nur funktions Umfang hat, nicht blockieren-scope ), und durch die Zeit, jene, Funktionen asynchron ausgeführt werden, haben die Schleife bereits fertig, und die i Variable set.length - 1 für alle Fälle enthalten, in denen setTimeout verwendet wird.

Wie üblich, versuchen Sie den i Variable mit einem anderen Verschluss zu erfassen:

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

Mit Timeout ist eine trickst Sache, wenn es um timed-Animation / Wirkung kommt.

Ich habe den Code nicht testen, aber es durch das Surfen, ich bemerken, dass Sie setTimeout ohne etwas zu verwenden, um sie zu löschen.

Was passiert, wenn Benutzer Ereignisse während der ‚Verspätung‘ auslösen? Sie haben etwas zu implementieren, das auch zu verwalten.

Leider habe ich keine Antwort für Sie jetzt haben, vielleicht, wenn ich mehr Zeit später haben oder jemand kommt mit einer eleganteren Lösung.

Answer 3

http://docs.jquery.com/Effects/fadeOut können Sie erstellen Sie einen Rückruf, die eine Funktion ist, dass Sie ausführen können, wenn der fadeOut beendet. Also, wenn Sie möchten, so die Fades Kette zusammen, wenn man nach Abschluss der nächsten nennt. Wenn das nicht das, was Sie suchen kann ich Ihre Frage werden Verlesen.

Auch in Beispiel 3, ich glaube, Sie es wie folgt schreiben wollen und nicht eine Funktionsdefinition der setTimeout als die vergangen sind, wird nichts tun.

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