I'm simply trying to figure out how to loop through elements with the same class and animate them one at a time. I figured this while loop would work but I can't understand why it won't.
$(document).ready(function() {
var index = 0;
var images = $('.image');
while (index < images.length) {
var image = images[index];
image.animate({
opacity: "1"
}, 1000, function() {
index++;
});
};
});
Heres the Fiddle
This is a simple implementation of what @Evert brilliantly explains in another answer.
Citing their answer here
index++ is called in a callback that's executed after the animation. The animation would only start after this script has stopped executing.
Because of this, index++ never gets executed and the loop never ends.
You need to rewrite this as a recursive function. The event handler that now calls index++ actually needs to be responsible for setting up the next animation.
Implementation can be something like this
var index = 0;
var images = $('.image');
animate(images);
function animate() {
var image = images.eq(index);
image.animate({
opacity: "1"
}, 1000, function () {
index++;
animate();
});
}
index++ is called in a callback that's executed after the animation. The animation would only start after this script has stopped executing.
Because of this, index++ never gets executed and the loop never ends.
You need to rewrite this as a recursive function. The event handler that now calls index++ actually needs to be responsible for setting up the next animation.
There's also a jQuery .each function, used like this:
$('.class').each(function() {
$(this).animate();
});
Where this is the next item with that class
Your logic is going wrong at index++; You should have a recursive function. You need to increment the value of index within the recursive function.
function YourRecusiveFunction() {
var image = images.eq(index);
image.animate({
opacity: '1'
}, 1000, function () {
index++;
YourRecusiveFunction();
});
}
Call YourRecusiveFunction() once the document is ready.
Why not just use the jQuery each function?
var images = $('.image');
$.each(images,function(){
$(this).animate({
opacity:"1"
}, 1000, function(){
index++;
});
});
;at the end of awhileblock.