Wie man einen Satz von jQuery-Objekten einzeln animiert (statt alle auf einmal)

Question

Ich versuche, einen Bild-Slider zu bauen. (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 Z-Index: 0. Was ich versuche zu tun ist, nehmen Sie die Reihe von Bildern, dann wählen Sie jedes der Bilder und ändern Sie den Index auf 1, animieren die Opazität, und setze es dann wieder 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 zur gleichen Zeit machen. Anstatt eines nach dem anderen zu tun. Ich weiß, dass Sie Callback-Funktionen wie zum Beispiel verwenden können:

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

})

Aber wenn ich mehr Bilder hätte es komplizierter geworden. Ich versuche, einen effizienteren Weg zu finden, aber ich finde keine Antwort. Diese

ist, was ich habe versucht:

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

, aber es funktioniert nicht. Alle Bilder machen die Animation gleichzeitig. Ich habe sogar versucht, mit einer „für“ Schleife, aber ich habe das Gleiche:

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ß, dass ich etwas falsch mache, aber ich kann nicht herausfinden, was es ist. Wenn jemand Hilfe hat, würde es sehr geschätzt werden!

Answer 1

Verwenden a .delay(), wie folgt aus:

images.each(function (i) { 
    $(this).delay(3000*i) 
      .css({ opacity : 0, "z-index": 1 }) 
      .animate({ opacity: 1 }, 3000); 
}); 

Da dies den Index des Elements verwendet als den ersten Parameter an die .each() Rückruf übergeben das erste 3000*0 ms verzögert ist, so gar nicht, die zweite Verzögerungen für 3000ms, etc ... so animieren sie nacheinander.

Answer 2

Verwenden .queue() setzen sie http://api.jquery.com/queue/

Answer 3

Wenn Sie nicht wollen, verwenden delay (dies tun, das ist, wie ich würde), können Sie so etwas tun könnte, eine rekursive Funktion.

function animateImage(images, i) { 
  $(this).css({ 
   "opacity" : '0.0', 
   "z-index" : "1" 
  }).animate({ 
     opacity: "1.0" 
    }, 3000, function() { 
     var next = i + 1; 
    
     if (next < images.length) { 
      animateImage(images, next); 
     } 
    }); 
} 

animateImage(images, 0);