How to fade in elements when using jquery templates

Question

Hi guys, I am trying to erase a list of items sequentially when using jquery templates.

I have seen how to do this without using jquery templates, but am not sure how to do this when using them.

Here's the effect I'm going to do:

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

Here is 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 to get this 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 is the answer

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

Remember to set your display property to none in your CSS for your "li" (this was already part of the right).

Thanks to everyone who tried to help!

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

DEMO