2

次の形式のul要素$（'＃sidebar_append'）にhtml文字列（var data ['return']）を追加しています

<li>item one</li>
<li>item two</li>
<li>item three</li>

すべての子に対してシーケンシャルフェードインアニメーションを作成したいと思います。次のことを試しましたが、フェードインしません

$('#sidebar_append')
    .hide()
    .append(data['return'])
    .children()
    .each(function() {
          $(this).fadeIn('fast')
    });

console.log（$（this））を実行すると、実際にliはFirebugが発生しますが、発生しませんfadeIn。

4

3 に答える 3

1

$('#sidebar_append')気にしないでください、それはかなり単純です、私はそれがまだ隠されていることを忘れました。シーケンスアニメーションを作成するには、遅延も必要です。

$('#sidebar_append')
  .append(data['return'])
  .children().hide()
  .each(function(index) {
      $(this).delay(150*index).fadeIn('slow')
  });
于 2012-08-23T10:37:16.390 に答える
1

これを試して

(function(){
    $('#sidebar_append').append(data['return']).children().hide();
    var index=0;
    function show()
    {
        $('#sidebar_append li').eq(index).fadeIn('slow', function(){
            index+=1;
            if($('#sidebar_append li').eq(index).length) show();
            else return false;
        });
    }
    show();
})();

デモ。

于 2012-08-23T11:11:16.873 に答える
0

そのプラグインjqueryと一緒に-タイミング全体がはるかに短くなります：

$('#sidebar_append').append(data['return'])
    .children().hide().each($).fadeIn('fast',$);

voilà

于 2012-08-28T09:22:25.203 に答える