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

【问题标题】：how to fade in items sequentially while using jquery templates如何在使用 jquery 模板时按顺序淡入项目
【发布时间】：2012-05-08 20:14:11
【问题描述】：

大家好，我正在尝试在使用 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（这部分已经正确了）。

感谢所有试图提供帮助的人！

【问题讨论】：

能否也粘贴您正在使用的模板。

标签： javascript jquery jquery-templates

【解决方案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

【讨论】：