使用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

编辑：改变淡出淡出

Answer 2

var slightdelay = 100; // in milliseconds

function fadeOneIn()
{
    $("ul li:not(:visible):first").fadeIn(function() { setTimeout(fadeOneIn, slightdelay); });
}

$("#trigger").click(fadeOneIn);

Answer 3

假设：

<ul class="fadein">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

和CSS：

ul.fadein li { display: none; }

运行：

$(function() {
  fade_in_next();
});

function fade_in_next() {
  $("ul.fadein > li:hidden:first").fadeIn("slow", function() {
    setTimeout(fade_in_next, 500);
  });
}