jQuery追加fadeIn

97

しかし、そこにある解決策は私にとってはうまくいきません。私はしようとしています：

 $('#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);

他の提案？

jquery

— MPEN
ソース

199

最初の試みは非常に近いですが、が追加されたばかりのアイテムではなく、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 stle="display:none"><img src="/photos/t/'+data.filename+'"/></li>')
    .children(':last')
    .hide()
    .fadeIn(2000);

— ベン・ブランク
ソース

1

綺麗な！完璧に動作します。サムネイルの読み込みが完了するまで、フェードの開始を遅らせる方法をたまたま知りませんか？

— mpen 2009年

頭から離れているわけではありませんが、「画像の読み込みが完了したときに関数をトリガーする方法」は、別の質問にはお勧めできません。;-)

— ベンブランク

確かに、あなたがとても賢くて1石で2羽の鳥を殺せると思っていた：pおお、まあ、Googleが解決策を提供してくれた。もう一度ありがとう:)

— mpen 2009年

それでもリンクがお手元にある場合は、テクニックをご覧ください。

— Ben Blank

1

例をありがとう！それは :) ではありstyleません stle

— msroot

45

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

— ローマ・スクリャロフ
ソース

4

卑劣な...順序を逆にします。私はそれが好きです。

— mpen 2011年

30

ベン・ブランクの答えは良いですが、私にとって、フェージングはグリッチです。追加した後でフェードインしてみてください。

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

— デレク・イルチュク
ソース

1

私は完全に同意します。このアプローチは、フリッカーを引き起こす1つのフレームレンダリングを回避します...もう少し洗練されています

— Paul Carroll

おかげで-これにより、表示しようとしているアイテムのレイアウト/配置が同時に両方を実行すると一貫性が失われる不具合が修正されました。

— フラックス

3

それを試してみてください！

 $('#thumbnails').append(<li> your content </li>);
 $('#thumbnails li:last').hide().fadeIn(2000);

— オガイト
ソース

2

これを試して：

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

— ウェッサム・エル・マディ
ソース

0

これが私が使った解決策です：

function onComplete(event, queueID, fileObj, response, info) {
    var data = eval('(' + response + ')');
    if (data.success) {
        $('#file-' + queueID).fadeOut(1000);
        var img = new Image();
        $(img).load(function () { // wait for thumbnail to finish loading before fading in
            var item = $('<li id="thumb-' + data.photo_id + '"><a href="#" onclick="deletePhoto(' + data.photo_id + ')" class="delete" alt="Delete"></a><a href="#" class="edit" alt="Edit"></a><div class="thumb-corners"></div><img class="thumbnail" src="/photos/t/' + data.filename + '" width=150 height=150/></li>');
            $('#thumbnails').append(item.hide().fadeIn(2000));).attr('src', '/photos/t/' + data.filename);
        } else {
            $('#file-' + queueID).addClass('error');
            //alert('error ' + data.errno); // TODO: delete me
            $('#file-' + queueID + ' .progress').html('error ' + data.errno);
        }
    }
}

これはuploadifyで動作します。jqueryのloadイベントを使用して、画像が表示される前に画像の読み込みが完了するのを待ちます。これが最善の方法かどうかはわかりませんが、私にとってはうまくいきました。

— MPEN
ソース