Question

I am currently working on a simple website and I am trying to set up a simple slide show that fades from one image to another. The way I have it set up currently it will load all the images from a folder into the html (dynamically) using JQuery.

I have it so that it get’s the list of image names (through php) and then just add’s the html for each image (images is just an array of the names of each image):

for(var i = 0; i < images.length; i++) {
    $('#slideshow').append('<img id="\"slide' + i + '\"" src="animations/' + images[i] + '" style=\"display: none;\"/>');
}

It then calls this method which should begin (and continue) to cycle through them. I got it working without the dynamically loaded images, but seeing as you can’t use .css or .fadeIn with dynamic content I am stuck

function countDown() {
    setTimeout(countDown, 4000);
    lastSlideNum = count;
    count++;
    if(count > images.length)
        count = 0;
    currentSlideNum = count;

    //This next part never gets called  because it can't access the dynamically created img
    $("#slide" + lastSlideNum).fadeOut('slow', function() { 
        $(this).css("display", "none");
        $("#slide" + currentSlideNum).fadeIn('slow');
    });
}

I realize it probably isn’t pretty or the easiest way of doing things, but any advice on this would help greatly. Keep in mind I’m pretty new to JQuery, so if there is a much easier way about this please let me know.

TL;DR:
Any work around for fading in and out dynamically loaded content?

Answer 1

Try my demo here: http://jsfiddle.net/QAa7a/

The idea is querying using $(“#slideshow img:nth-child(” + lastSlideNum + “)”):

function countDown() {
    setTimeout(countDown, 4000);
    lastSlideNum = count + 1;
    count++;
    if(count >= images.length)
        count = 0;
    currentSlideNum = count + 1;

    //This next part never gets called  because it can't access the dynamically created img
    console.log(lastSlideNum + "?" + $("#slide" + lastSlideNum).length);
    $("#slideshow img:nth-child(" + lastSlideNum + ")").fadeOut('slow', function() { 
        $(this).css("display", "none");
        $("#slideshow img:nth-child(" + currentSlideNum + ")").fadeIn('slow');
    });
}

Check this link in case you don’t familiar with nth-child selector: http://api.jquery.com/nth-child-selector/