Javascript jquery为每个列表项设置动画

我有这个列表，我想通过每个列表项设置动画，基本上有一个每个项向上移动几厘米的级联效果

我创建这段代码是为了实现这一点，但它似乎是通过整个列表而不是单个列表项来设置动画

JS-jquery

$("#energy_guide ul").animate({"top" : "+=20px"}, "fast");

还有HTML

<ul class="guide-block-list us-list" id="energy_guide">
    <li>
        <a href="#">Item 1</a>
    </li>

    <li>
        <a href="#">Item 2</a>
    </li>
</ul>

你们对我如何实现这一目标有什么建议吗

---

谢谢

此代码将执行您想要的操作

var delay_time = 0;
$("#energy_guide ul li").each(function() {
    $(this).delay(delay_time).animate({"top" : "+=20px"}, "fast");
    delay_time += 200;
});

---

它在每个

li

中循环。第一个

li

的延迟为0，第二个延迟为200毫秒，第三个延迟为400毫秒，依此类推。因此，它将在不同的时间对它们进行动画处理，就在彼此之后。如果您想让延迟更快/更慢，请随意更改延迟时间，并将延迟时间从200增加到其他值。

使用

$（“ul能源指南li”）选择
li
s。