使用jQuery动画列表项

Question

我试图找到一个一个动画项目列表的最佳方式.

例如,我有一个带有7个项目的UL,当点击我的触发元素时,我希望每个项目在一个下面淡入淡出,每个项目之间稍有延迟.

任何想法都将非常感激.

谢谢

Answer 1

您可以使用伪递归:

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

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

要在每个淡入淡出之间添加延迟,可以调用jQuery的delay方法,如下所示:

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

演示

编辑:改变淡出淡入