0

嘿伙计们，我正在尝试在使用 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' 设置你的 display 属性为 none （这部分已经正确了）。

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

4

1 回答 1

1

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

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

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

演示

于 2012-05-08T20:30:22.437 回答