javascript - 循环浏览导航栏的列表项并使用 jQuery 的 fadeIn() 动画使它们淡入

Question

我想做的是遍历导航的列表项，并按顺序淡入每个元素，但具有两个延迟选项的灵 active :在继续之前等待每个先前动画完成的选项下一个动画，和/或每个动画开始之间的自定义延迟/超时(毫秒)(不是一个动画结束和下一个动画开始之间的延迟)。

当然，我可以使用嵌套回调并专门调用每个列表项，但这在代码方面效率很低，并且只会一个接一个地加载每个元素，这在某些情况下没问题，但在其他情况下我可能想要让它们几乎同时加载，可能会有轻微的延迟(模拟我见过的一些基于 Flash 的导航)。这就是为什么我说自定义延迟选项应该在一个开始和下一个开始之间。

就其值(value)而言，导航元素首先通过 $('#nav li').hide(); 隐藏，但我怀疑您已经猜到情况可能如此。 :)

如何实现这种效果？

Answer 1

$('#nav li').each(function(index, element) {
    $(element).delay(index*50).fadeIn(400); // delays each subsequent fade by 50ms.
    // Change 50 to match the duration of the fade and they will fade in one after the other.
});