Как я могу анимировать недавно созданный элемент DOM в одной и той же функции?

Question

Я работаю над созданием галереи изображений, где изображения будут сгенерированы постепенным замиранием в слоях один поверх другого, чтобы сформировать окончательное изображение.

У меня есть много таких слоев, так вместо того, чтобы загружать их на множество различных <img> элементов сразу (что замедлит время загрузки) Я хочу начать с одной <img id="base">, а затем постепенно добавлять элементы изображения с JQuery .after() метод, назначить им соответствующие источники и затухать их с задержкой.

Проблема в том, что я не могу прикрепить анимации к вновь созданным элементам, потому что (я предполагаю) они еще не существуют в пределах одной и той же функции. Вот мой код:

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

Пожалуйста, п что я изменил свой фактический код, чтобы проиллюстрировать это лучше. Я довольно новичок в JavaScript, но я быстр, поэтому я был бы признателен, если бы вы могли сказать мне, что я делаю неправильно, и какое решение я должен преследовать.

Answer 1

EDIT: Я включил свой код внутри вашего JSFiddle (все, что вам нужно сделать, это добавить изображения библиотеки-x.jpg): http://jsfiddle.net/pgoevx03/

---

Я попытался повторить намерение кода в более чистом/более гибком виде. Пожалуйста, дайте мне знать, могу ли я сделать что-нибудь еще, чтобы помочь.

Я не говорю, что это лучший способ сделать это, но его должно быть достаточно легко понять и использовать.

Код не проверен, но должен работать нормально. Замечания должны помочь вам, если есть какая-либо ошибка компиляции.

Обратите внимание, что я удалил первое изображение в галерее (с идентификатором «база») из файла HTML. Он будет добавлен так же, как и остальные.

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

}