how to fade in items sequentially while using jquery templates

问题

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

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

Here's the effect I am going for:

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

Here's my template code:

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

Thanks for any help!

Update:

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)});

UPDATE:

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);});

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!

回答1:

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

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");
     });
});

DEMO

来源：https://stackoverflow.com/questions/10505825/how-to-fade-in-items-sequentially-while-using-jquery-templates

标签

javascript

jquery

jquery-templates