How can I animate a recently created DOM element in the same function?

Question

I'm working to create an image gallery where the images will be composed by progressively fading in layers one on top of the other to form the final image.

I have many such layers so instead of loading them into many different <img> elements all at once (which would slow load time) I want to start off with a single <img id="base"> and then progressively add image elements with the jQuery .after() method, assign them the relevant sources and fade them in with a delay.

The problem is that I can't attach animations to the newly created elements because (I'm assuming) they don't exist yet within the same function. Here is my code:

HTML

<div id="gallery">
  <img id="base" src="image-1.jpg">
</div>

CSS

#base { 
    opacity: 0;
    }
.layers {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    }

JavaScript

$(document).ready(function () {
    $("#base").animate({opacity: 1}, 300); //fade in base
    for (var i = 1; i <= numberOfLayers; i++, gap += 300) {
        // create a new element
        $("#base").after("<img class='layers' src='" + imgName + ".png'>");
        // fade that new element in
        $("#gallery").children().eq(i).delay(gap).animate({opacity: '1'}, 300);
    }
}

Please note that I've altered my actual code to illustrate this better. I'm fairly new at JavaScript but I'm a quick learner so I'd appreciate if you could tell me what I'm doing wrong and what solution I should pursue.

Answer 1

EDIT: I've included my code inside your JSFiddle (all you need to do is add the library-X.jpg images) : http://jsfiddle.net/pgoevx03/

---

I've tried to replicate the intent of the code in a cleaner/more flexible way. Please let me know if I can do anything else to help.

I'm not saying this is the best way to do it, but it should be easy enough to understand and use.

The code is untested, but should work just fine. The comments should help you out if there's any compilation error.

Note that I removed the first image in the gallery (with ID "base") from the HTML file. It will be appended the same way as the rest.

// Array storing all the images to append to the gallery
var galleryImages = [
    "image-1.jpg",
    "image-2.jpg",
    "image-3.jpg",
    "image-4.jpg",
    "image-5.jpg",
    "image-6.jpg",
    "image-7.jpg",
    "image-8.jpg",
    "image-9.jpg",
    "image-10.jpg"
];

// Index of the image about to be appended
var imgIndex = -1;

var baseID = "base";


$(document).ready(function() {
    // Start appending images
    appendAllImages();
});


// Append the images, one at a time, at the end of the gallery
function appendAllImages() {

    //Move to the next image
    imgIndex++;

    //We've reached the last image: stop appending
    if (imgIndex >= galleryImages.length) return;



    //Create image object
    var img = $("<img>", {
        src: galleryImages[imgIndex],
    });

    if (imgIndex === 0) { // It's the base!

        //Give the base ID to the first image
        img.attr("id", baseID);

        //Append the image object
        $("#gallery").append(img);


    } else { // It's a layer!

        //Give the base ID to the first image
        img.attr("class", "layers");

        //Append the image object
        $("#" + baseID).after(img);

    }

    //Fade in the image appended; append the next image once it's done fading in
    img.animate({
        opacity: 1,
    }, 300, appendAllImages);

}