Javascript 如何在同一函数中设置最近创建的DOM元素的动画？

我正在努力创建一个图像库，在这个库中，图像将通过一层一层地逐渐淡入来形成最终图像

我有很多这样的层，所以我不想一次将它们加载到许多不同的元素中，这会减慢加载时间，我想从一个开始，然后使用jQuery逐步添加图像元素。在方法之后，为它们分配相关的源并延迟淡入

问题是我无法将动画附加到新创建的元素，因为我假设它们还不存在于同一个函数中。这是我的密码：

HTML

JavaScript

---

请注意，为了更好地说明这一点，我修改了实际代码。我对JavaScript相当陌生，但我学得很快，所以如果您能告诉我我做错了什么以及我应该寻求什么解决方案，我将不胜感激

EDIT：我已将代码包含在JSFIDLE中，您只需添加library-X.jpg图像：

我试图以更清晰/更灵活的方式复制代码的意图。请让我知道我是否可以做任何其他的帮助

我并不是说这是最好的方法，但它应该足够容易理解和使用

代码未经测试，但应该可以正常工作。如果有任何编译错误，注释应该可以帮助您

请注意，我从HTML文件中删除了gallery中ID为base的第一个图像。它将以与其余部分相同的方式附加

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

你能提供一个演示吗？@Vohuman是的，希望如此helps@IonMates希望有助于。。。我看了看你最新的小提琴，发现我最初的建议有什么问题。

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

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

// 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);

}