Wie zu animieren eine Reihe von jQuery-Objekte ein zu einer Zeit (statt alle auf einmal)

Ich versuche zu bauen, ein Bild Schieberegler. (Ich weiß, es gibt Tonnen von plugins die es gibt, aber das ist mehr für pädagogische Zwecke).

Grundsätzlich habe ich eine Reihe von Bildern mit z-index: 0. Was ich versuche zu tun, ist die Menge der Bilder, dann wählen Sie eines der Bilder und ändern Sie den index auf 1, animieren Sie die Deckkraft, und dann legte Sie wieder auf 0, so dass das nächste Bild wird das gleiche tun.

Dies ist der erste Teil, aber das problem ist, dass ich wenn ich die Prüfung in diesem Teil, alle die Bilder machen und die animation in der gleichen Zeit. Anstatt das zu tun eine nach der anderen.
Ich weiß, dass Sie können verwenden callback-Funktionen, wie:

image1.animate(the animation, function({
       image2.animation(the animation, function({
                image3.animation(the animation, function}) etc...

})

Aber wenn ich mehr Bilder wäre es komplizierter geworden. Ich bin auf der Suche nach einer effizienteren Art und Weise, dies zu tun, aber ich bin nicht der Suche nach der Antwort.

Dies ist, was ich versucht habe:

images.each(function () {
    $(this).css({
        "opacity" : "0.0",
        "z-index" : "1"
    }).animate({
        opacity: "1.0"
    }, 3000);
});

aber es funktioniert nicht. Alle die Bilder machen und die animation in der gleichen Zeit. Ich habe sogar versucht mit einer "for" - Schleife, aber ich bekomme die gleiche Sache:

for (var i=0; i<images.length; i++){
    images.eq(i).css({
        "opacity" : "0.0",
        "z-index" : "1"
    }).animate({
        opacity: "1.0"
    }, 3000);
}

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

Schreibe einen Kommentar