Question

嘿伙计们，我正在尝试在使用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中将您的显示属性设置为无，以便您的＆＃39; li＆＃39; （已经有了那个部分）。

非常感谢那些试图提供帮助的人！

Answer 1

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

在你的代码中，“each”不会迭代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");
     });
});

DEMO

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

1 个答案: