Question

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/1.jpg" />', '<img src="images/1.jpg" />', '<img src="images/1.jpg" />', '<img src="images/1.jpg" />'];
    $(function() {
        $.each(arr, function() {
            $('<li style="padding-right:30px;padding-bottom:40px;">' + this + '</li>').appendTo(".project_images").fadeIn(500);
        });
    });
})

Can anyone advise?

Thanks in advance

Wayne

Answer 1

You can use the callback argument on fadeIn to run a piece of code once the animation is complete.

In this example, I use ‘shift’ on the array to pop an item from the front of it. Then I add this item, ensure it’s initially hidden and fade it in. If there are any more items in the array, it will call itself.

$(function() {
    var arr = ["hello", "item", "item2", "another"];

    function fadeInNextItem(el,parent) {
        var item = el.shift();
        if (item) {
            $('<li style="padding-right:30px;padding-bottom:40px;">' + item + '</li>')
               .appendTo(parent)
               .hide()
               .fadeIn(500, fadeInNextItem);
        }
    }

    fadeInNextItem(arr,'.project_images');

})

Fiddle: http://jsfiddle.net/jonathon/zandA/