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

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

• javascript
• jquery

• Try images.width() instead in your if statement – nonamorando Commented Jul 17, 2015 at 18:15
• For what it's worth, you don't need a ; at the end of a while block. – Mike Cluck Commented Jul 17, 2015 at 18:19

5 Answers 5

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();
    });
}

Demo https://jsfiddle/dhirajbodicherla/w4cgctyk/2/

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++;
    });
 });