jquery - 用jQuery动画列表项

我试图找到一种最好的方法来逐一设置项目 list 的动画。

因此，例如，我有一个包含7个项目的UL，并且单击触发元素时，我希望每个项目在另一个项目的下方逐渐淡入，而在每个项目之间会稍有延迟。

任何想法将不胜感激。

谢谢

最佳答案

您可以使用伪递归:

function fadeItem() {
    $('ul li:hidden:first').fadeIn(fadeItem);
}

这将在第一个隐藏项目中淡出，并在动画结束时调用自身，使第二个项目淡出。
在最后一项消失后，选择器将不匹配任何内容，因此将停止。

要在每次淡入之间添加延迟，可以调用jQuery的 delay method，如下所示:

function fadeItem() {
    $('ul li:hidden:first').delay(500).fadeIn(fadeItem);
}

Demo

编辑:更改淡出淡入