如何在使用jquery模板时按顺序淡入项目

嘿伙计们，我正在尝试在使用jquery模板时按顺序淡入项目列表。

我已经看过如何在不使用jquery模板的情况下执行此操作，但在使用它们时不确定如何执行此操作。

这是我想要的效果：

http://demos.coolajax.net/jquery/sequential_fadein_fadeout/

这是我的模板代码：

$template.tmpl(formattedData).appendTo($el); 

谢谢你的帮助！

更新：

我认为以下是我需要做的事……

 $template.tmpl(formattedData).appendTo($el).delay(100*index).fadeIn(250); 

问题是如何获得该指数值？

我可以这样做吗？

 $template.tmpl(formattedData).appendTo($el).each(function(i){$.delay(100*i).fadeIn(250)}); 

更新：

我弄清楚了。 这是答案

 $template.tmpl(formattedData).appendTo($el).each(function(i){$(this).delay(200*i).fadeIn(250);}); 

不要忘记在CSS中为你的’li’设置你的显示属性为none（已经有那个部分）。

无论如何，谢谢所有试图帮助的人！

Answer 1

您应该使用“display：none”样式附加，然后为每个样式添加动画。

在你的代码中，“each”不会迭代li标签，它会尝试迭代li.parent标签（ul）。

 $(document).ready(function() { for(var i=0; i < 10; i++) { $("ul").append("
New element-"+i+"
") } $("ul li").each(function(index) { $(this).delay(100*index).fadeIn(250); $("li:even").css("background","#cfe9b6"); $("li:odd").css("background","#b0db86"); }); });​ 

DEMO