jquery - 使用 jQuery 对列表项进行动画处理

Question

我正在尝试找到对项目列表进行逐项动画处理的最佳方式。

例如，我有一个包含 7 个项目的 UL，当单击触发元素时，我希望每个项目淡入另一个项目下方，每个项目之间有轻微的延迟。

任何想法将不胜感激。

谢谢

Answer 1

您可以使用伪递归:

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

这将淡入第一个隐藏项目，并在动画完成时调用自身，淡出第二个项目。
当它在最后一项中淡出后，选择器将不再匹配任何内容，因此它将停止。

要在每次淡入淡出之间添加延迟，您可以调用 jQuery 的 delay method ，像这样:

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

Demo

编辑:将淡出更改为淡入