javascript - 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() 对效果进行排序或一个一个地调用函数，但只在一个元素上，在这种情况下我迷路了..

编辑:对于那些感兴趣的人，这里是完成这个序列的代码，感谢约瑟夫

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

---

这是另一种方式(为清晰起见，使用不透明度)，它使列表项之间有一定的延迟。

---

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