JavaScript - for loop iteration delay for stacked images

Question

I have a "deck" of images, each one with a different Z-index. The top "cards" will go below the card with the lowest Z-index (let's call it "image1") in succession, until "image1" appears on top of the others. This is for an animation, but I can't get the for loop to iterate with a set time. I want to try 30 images, for now, in 1 second. Here is the code:

function placeImage(x) {
    var div = document.getElementById("div_picture_right");
    div.innerHTML = ""; // clear images

    for (counter=1;counter<=x;counter++) {
        var image=document.createElement("img");
        image.src="borboleta/Borboleta"+counter+".png";
        image.width="195";
        image.height="390";
        image.alt="borboleta"+counter;
        image.id="imagem"+counter;
        image.style.backgroundColor="rgb(255,255,255)"
        image.style.position="absolute";
        image.style.zIndex=counter;
        div.appendChild(image);
    }
};

var animaRight = function(x) {
        var imageArray = [];
        for (counter=1;counter<=x;counter++) {
            imageArray[counter-1] = document.getElementById("imagem"+counter);
        }
    function delayLoop(x) { 
        for (counter=imageArray.length;counter>1;counter--) {
            if (imageArray[counter-1].style.zIndex==counter) {
                imageArray[counter-1].style.zIndex-=counter;
                setTimeout("delayLoop()", 1000/x);
            }           
        }
    }
    delayLoop(x);
};

Any help would me much appreciated! I tried some setTimeout functions, but I'm afraid I'm doing it wrong (placement, maybe?). If you need to, I'll edit the code with what I tried.

Without what you tried, it's hard to guess your problem but maybe this [related question](http://stackoverflow.com/questions/14791158/javascript-settimeout-and-loops) will help ? — Denys Séguret, Feb 26 '13 at 14:31
I'll edit right away! The problem is, I tried many approaches, so I'll have to pick one. — Marco Oliveira, Feb 26 '13 at 14:32

Denys Séguret · Accepted Answer · 2013-02-26T15:00:13.310

0

Is that what you want ?

var animaRight = function(x) {
    var imageArray = [];
    for (counter=1;counter<=x;counter++) {
        imageArray.push(document.getElementById("imagem"+counter));
    }
    for (var i=0; i<x; i++) {
        (function(i) {
            setTimeout(function(){
                imageArray[i%imageArray.length].style.zIndex=i*-1
            }, i*1000);
        })(i);
    }
};

If it does what you want, I'll explain it more.

edited Feb 26 '13 at 15:00

answered Feb 26 '13 at 14:45

Denys Séguret

372,613
87
782
758

It doesn't work, sadly. Before, I could get the Z-index of each image to change. With this piece of code, it doesn't change to what I wanted. Though I'll use your reasoning to adapt to what I had and see if it works. By the way, is there some recommended reading I can do in order to get better with this? I started by reading and analyzing code, using w3schools and writting myself. This is my first project, but the books that I find don't touch this subject. – Marco Oliveira Feb 26 '13 at 14:58

JavaScript - for loop iteration delay for stacked images

1 Answers1