对jQuery中列表项的连续影响

Question

这是我的代码片段:

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

我使用css水平设置它们(菜单式),我想要做的是动画<ul>元素的所有列表项.当dom准备就绪时我将它们放在首位,并在加载整个页面时将它们设置为底部以吸引用户的眼睛.

这是jquery代码:

$(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)
}

我知道如何使用queue()对函数进行排序或逐个调用函数,但只在一个元素上,我在这种情况下丢失了..

编辑:对于那些感兴趣的人,这是完成这个序列的代码,感谢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

演示

这是另一种方法（为了清晰起见，使用不透明度）对列表项进行连续动画处理，并在它们之间有延迟。

<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);
})

_{*请原谅那些比原名更小的名字……已经晚了 :P}