使用jQuery实现列表项的动画效果

Question

我正在尝试找到一种逐个动画显示列表项的最佳方法。

例如，我有一个UL，其中有7个项目，当单击触发元素时，我希望每个项目逐个淡入显示，每个项目之间略有延迟。

欢迎您提出任何想法。

谢谢。

- Giles Butler

Answer 1

您可以使用伪递归：

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

这将淡入第一个隐藏的项目，并在动画完成时调用自身，淡化第二个项目。
当它淡入最后一个项目后，选择器将不匹配任何内容，因此它将停止。
要在每次淡入之间添加延迟，可以像这样调用jQuery的delay方法：

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

演示

编辑：将淡出更改为淡入

- SLaks

---

谢谢大家的回复，这是我成功实现的一个方法，但我相信它们都差不多，我知道jQuery可以用几种不同的方式来做这件事。再次感谢 :) - Giles Butler

Answer 2

var slightdelay = 100; // in milliseconds

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

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

- Joel

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);
  });
}  

- cletus