jQuery .delay () in Animationsloops - Javascript, Jquery, Animation

Ich versuche mit jQuery ein paar grundlegende Animationen zu machen. Ich möchte einige Elemente einblenden, aber ich möchte das zweite Element einblenden, während das erste Element zur Hälfte fertig ist, das dritte Element, während das zweite Element zur Hälfte fertiggestellt ist usw.

Ich weiß, dass ich so etwas tun kann:

$("#element1).fadeIn(1000);
$("#element2).delay(500).fadeIn(1000);
$("#element3).delay(500).fadeIn(1000);
etc.

Eine Schleife wirkt jedoch eleganter und meine Frage ist, warum der folgende Code nicht wie erwartet funktioniert?

for (var i = 1; i <= 5; i++;) {
$("#box" + i).fadeIn(2000).delay(500);
}

Ich würde erwarten, dass eine Verzögerung zwischen den einzelnen Wiederholungen der Schleife auftritt, stattdessen erfolgt die gesamte Animation synchron.

Wo sehe ich das falsch?

Antworten:

Jedes Element hat eine eigene Warteschlange für Effekte. Für jedes Element muss es einen anderen Verzögerungswert geben:

for (var i = 0; i < 5; i++) {
$("#box" + (i + 1)).delay(500 * i).fadeIn(1000);
}

http://jsfiddle.net/cDcU7/1/