0

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

アップデート：

私はそれを理解することができました。これが答えです

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

「li」の CSS で display プロパティを none に設定することを忘れないでください (すでにその部分は正しく設定されています)。

とにかく、助けようとしたすべての人に感謝します！

4

1 に答える 1

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

デモ

于 2012-05-08T20:30:22.437 に答える