Question

I have some array data returned from an ajax call consisting of an image link, some title text and a link. I am adding each element of this array to a div on the page by using the jQuery append method and the fading it in. Because it’s executing so fast all the elements fade in at the same time. I’d like each one to fade in sequentially. So, when the element is added to the main div, fade in and then pause the .each statement for about 100 milliseconds before adding the next element. However I’m not sure how to do this. Any ideas? Here’s my code.

jQuery.each(data.themes, function (index){

    theme_html = "<div class=\"themePreviewWrap\" id=\"theme_" + index + "\" style=\"display:none;\"><div class=\"themePreview\"><img src=\"" + data.themes[index]['custom_color_screenshot'] + "\" /></div><div class=\"themePreviewButtom\"><div class=\"title\"><b>" + data.themes[index]['title'] + "</b></div><div class=\"link\">" + data.themes[index]['actions'] + "</div></div></div></div>";

    jQuery('#themeholder').append(theme_html);

    jQuery("#theme_" + index).fadeIn(500);

});

Answer 1

Something like this:

jQuery("#theme_" + index).delay(index * 1000).fadeIn(500);