jqueryテンプレートを使用してアイテムを順番にフェードインする方法

Question

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

UPDATE：

私はそれを把握することができました。ここに答えがあります

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

あなたの 'li'（既にその部分があったのです）のために、表示プロパティをCSSでnoneに設定することを忘れないでください。

お手数をおかけしていただきありがとうございました。

Answer 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