Eine Reihe von jQuery-Objekten einzeln animieren (statt alle gleichzeitig)

8

Ich versuche einen Bild-Slider zu erstellen. (Ich weiß, es gibt Tonnen von Plug-Ins da draußen, aber das ist mehr für Bildungszwecke).

Grundsätzlich habe ich eine Reihe von Bildern mit dem Z-Index: 0. Ich versuche, die Bilder zu nehmen, dann jedes der Bilder auszuwählen und den Index auf 1 zu ändern, die Deckkraft zu animieren und dann setze es zurück auf 0, so dass das nächste Bild dasselbe tut.

Dies ist der erste Teil, aber das Problem, das ich habe, ist, dass wenn ich diesen Teil teste, alle Bilder die Animation gleichzeitig machen. Anstatt eines nach dem anderen zu tun. Ich weiß, dass Sie Callback-Funktionen wie:

verwenden können %Vor%

})

Aber wenn ich mehr Bilder hätte, würde es komplizierter werden. Ich versuche einen effizienteren Weg zu finden, aber ich finde keine Antwort.

Das habe ich ausprobiert:

%Vor%

aber es funktioniert nicht. Alle Bilder machen die Animation gleichzeitig. Ich habe es sogar mit einer "for" -Schleife versucht, aber ich bekomme das gleiche:

%Vor%

Ich weiß, dass ich etwas falsch mache, aber ich kann nicht herausfinden, was es ist. Wenn jemand Hilfe hat, würde es sehr geschätzt werden!

    
Marvin Alejandro Herrera 01.01.2011, 21:39
quelle

3 Antworten

11

Verwenden Sie eine .delay() , wie folgt:

%Vor%

Da dies den Index des Elements verwendet, das als erster Parameter für den .each() -Rückruf übergeben wurde, wird der erste um% verzögert. co_de% ms, also gar nicht, die zweiten Verzögerungen für 3000ms, etc ... so animieren sie nacheinander.

    
Nick Craver 01.01.2011, 21:40
quelle
2

Wenn Sie delay nicht verwenden möchten (was ich tun würde), könnten Sie so etwas mit einer rekursiven Funktion machen.

%Vor%     
lonesomeday 01.01.2011 22:13
quelle
-1

Verwenden Sie .queue() , um sie Ссылка

festzulegen     
Matt Asbury 01.01.2011 21:42
quelle

Tags und Links