fadeIn each value slowly in JQuery

[Waynef]

Hi,

I want to fade in each element in my array with a slight delay from the preceding element so they dont all fade in at the same time.

Here is my code:

$(document).ready(function() {
    var arr = ['<img src="images/1.jpg" />', '<img src="images/2.jpg" />', '<img src="images/3.jpg" />', '<img src="images/4.jpg" />', '<img src="images/5.jpg" />'];
    $(function() {
        $.each(arr, function() {
            $('<li>' + this + '</li>').appendTo(".project_images").fadeIn(500);
        });
    });
})

Can anyone advise?

Thanks in advance

Wayne

[Waynef]

Answered by the good people at stackflow.com

$(document).ready(function() {
var arr = ['<img src="images/1.jpg" />', '<img src="images/1.jpg" />', '<img src="images/1.jpg" />', '<img src="images/1.jpg" />', '<img src="images/1.jpg" />'];
$(function() {
    function fadeInNextItem() {
        var item = arr.shift();
        if (item) {
            $('<li style="padding-right:30px;padding-bottom:40px;">' + item + '</li>')
               .appendTo(".project_images")
               .hide()
               .fadeIn(500, fadeInNextItem);
        }
    }

    fadeInNextItem();
	});
});