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

Solution 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