如何在使用jquery模板时按顺序淡入项目 [英] how to fade in items sequentially while using jquery templates

问题描述

我正在尝试使用jquery模板依次显示项目列表.

Hey guys I am trying to fade in a list of items sequentially while using jquery templates.

我已经看到了如何不使用jquery模板来做到这一点，但是不确定如何使用它们.

I've seen how to do this without the use of jquery templates but not sure about how to do so when using them.

这就是我要的效果:

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

这是我的模板代码:

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

感谢您的帮助！

更新:

我认为以下是我需要做的...

I think something like the following is what I need to do...

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

问题是如何获取该索引值?

The question is how do I get that index value?

我可以做这样的事情吗?

Can I do something like this?

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

更新:

我能够弄清楚.这就是答案

I was able to figure it out. Here's the answer

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

别忘了在CSS中将"li"的display属性设置为none(已经正确了).

Don't forget to set your display property to none in your CSS for your 'li' (already had that part right).

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

Thanks anyway to all the folks that tried to help out!

推荐答案

您应该使用"display:none"样式附加动画，然后为每个动画设置动画.

you should append with "display:none" style then animate each one.

在您的代码中，每个"不迭代li标签，而是尝试迭代li.parent标签(ul).

In your code "each" doesn't iterate li tags, it tries to iterate li.parent tag(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");
     });
});​

演示

这篇关于如何在使用jquery模板时按顺序淡入项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！