[解決済み] jQuery append フェードイン

質問

に似ています。 フェードインとアペンドの使用

しかし、そこにある解決策は、私のために動作していません。私は試しています。

 $('#thumbnails').append('<li><img src="/photos/t/'+data.filename+'"/></li>').hide().fadeIn(2000);

しかし、この場合、リスト全体が一度にフェードインし、各項目が追加されるわけではありません。これは次のようになります。 hide() と fadeIn() が適用されているのは $('#thumbnails') ではなく <li> . どうすれば、代わりにそれを適用させることができるのでしょうか？これもうまくいきません。

$('#thumbnails').append('<li stle="display:none"><img src="/photos/t/'+data.filename+'"/></li>').filter(':last').fadeIn(2000);

他の提案は？

どのように解決するのですか？

あなたの最初の試みは非常に近いですが、覚えておいてください。 append() は #thumbnails を返すのであって、今追加したアイテムではありません。 代わりに、最初にアイテムを構築して hide().fadeIn() を適用してから追加します。

$('#thumbnails')
    .append($('<li><img src="/photos/t/'+data.filename+'"/></li>')
        .hide()
        .fadeIn(2000)
    );

これは、ドル関数を使って <li> を先に構築しています。 もちろん2行で書いても構いませんが、その方が分かりやすいなら。

var item = $('<li><img src="/photos/t/'+data.filename+'"/></li>')
    .hide()
    .fadeIn(2000);
$('#thumbnails').append(item);

編集します。 2回目の試みもほぼ成功していますが、そのためには children() の代わりに filter() . 後者は現在のクエリからノードを削除するだけで、新しく追加されたアイテムはそのクエリにはなく、代わりに子ノードとなります。

$('#thumbnails')
    .append('<li style="display:none"><img src="/photos/t/'+data.filename+'"/></li>')
    .children(':last')
    .hide()
    .fadeIn(2000);