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
Share Improve this question edited Jul 17, 2015 at 18:18 Mike Cluck 32.5k13 gold badges83 silver badges94 bronze badges asked Jul 17, 2015 at 18:14 wishiwasabigdataguywishiwasabigdataguy 1473 silver badges11 bronze badges 2- 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 awhile
block. – Mike Cluck Commented Jul 17, 2015 at 18:19
5 Answers
Reset to default 8This 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++;
});
});