sequential effects on list-items in jQuery

Question

here's the snippet of my code :

<ul>
    <li><a href="home">Home</a></li>
    <li><a href="links">Links</a></li>
    <li><a href="contact">Contact</a></li>
</ul>

I use css to style them horizontally (menu-like) and what I would like to do is to animate all the list-items of the <ul> element. I top them when the dom is ready and animate them to the bottom to attract users' eyes when the entire page is loaded.

here's the jquery code:

$(function(){
    $("ul li").css('top', '-40px'); //items are in relative position

    $(window).bind("load", items_animate, false);
});

function items_animate(){
       ... //I'd like to animate each <li> of the <ul> changing 'top' to '0px' but not simultaneously, I want to declare a DELAY between each animation (<li>'s get down in a row)
}

I know how to sequence effects with queue() or calling functions one by one but on only one element, I'm lost in this case..

EDIT : for those who are interested, here's the code to accomplish this sequence, thanks to Joseph

var animationDelay = 600;
var offset = 200;

function blah(meh) {
    setTimeout(function(){
        $(meh).animate({
            opacity: "0"
        }, animationDelay);
    },$(meh).index() * offset)
}

$("li").each(function(){
    blah(this);
})

Answer 1

Demo

---

Here is another way (using opacity for clarity) that animates the list items in series with a delay in between.

---

<ul>
    <li><a href="home">Home</a></li>
    <li><a href="links">Links</a></li>
    <li><a href="contact">Contact</a></li>
</ul>

var animationDelay = 600;
var offset = 200;

function blah(meh) {
    setTimeout(function(){
        $(meh).animate({
            opacity: "0"
        }, animationDelay);
    },$(meh).index() * offset)
}

$("li").each(function(){
    blah(this);
})

_{*pardon the less than original names... it's late :P}

Answer 2

function slide_down_recursive(e,duration,callback)
{
    $(e).animate(
    {
        top: '0px'
    }, duration, 'linear',function()
    {
        if($(e).next().length == 0)
        {
            if(typeof(callback) == 'function')
            {
                callback();
            }
            return;
        }
        else
        {
            // Apply recursion for every sibling.
            slide_down_recursive($(e).next(),duration,callback);
        }
    });

} // End slide_down_recursive
slide_down_recursive($('li:first-child'),500);

Here is a demo: http://jsfiddle.net/rpvyZ/

Answer 3

Try something like this:

$(function() {
    function animateSequentially(element, properties, duration) {
        element.animate(properties, duration, function() {
            animateSequentially(element.next(), properties, duration);
        });
    }
    animateSequentially($("ul > li:first-child"), {top: '0'}, 1000);
});

Edit: If you'd like them to animate sequentially but not wait for the previous one, you can try this:

$(function() {
    $("ul > li").each(function(index, item) {
        setTimeout(function() {
            $(item).animate({top: '0'}, 500);
        }, index*175);
    });
});

Try the one that waits here, or the one that doesn't wait here.