jQuery menambahkan fadeIn

97

Mirip dengan: Menggunakan fadein dan append

Tetapi solusi di sana tidak berhasil untuk saya. Saya mencoba:

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

Tapi kemudian seluruh daftar memudar sekaligus, tidak setiap item ditambahkan. Sepertinya hide()dan fadeIn()diterapkan $('#thumbnails')bukan ke <li>. Bagaimana cara saya membuat mereka menerapkannya? Ini juga tidak berhasil:

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

Saran lain?

jquery

— mpen
sumber

199

Upaya pertama Anda sangat dekat, tetapi ingat itu append()kembali #thumbnails, bukan item yang baru saja Anda tambahkan. Sebagai gantinya, buat item Anda terlebih dahulu dan terapkan hide().fadeIn()sebelum menambahkannya:

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

Ini menggunakan fungsi dolar untuk membangun <li>sebelumnya. Anda juga bisa menulisnya dalam dua baris, tentu saja, jika itu membuatnya lebih jelas:

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

Edit: upaya kedua Anda juga hampir di sana, tetapi Anda perlu menggunakan children()bukan filter(). Yang terakhir hanya menghapus node dari kueri saat ini; item Anda yang baru ditambahkan tidak ada dalam kueri itu, melainkan node turunan.

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

— Ben Blank
sumber

1

Cantik! Bekerja dengan sempurna. Anda tidak akan tahu cara menunda memulai pemudaran sampai thumbnail selesai dimuat juga, bukan?

— mpen

Bukan di luar kepala saya, tetapi "bagaimana cara memicu suatu fungsi saat gambar selesai dimuat" bukanlah ide yang buruk untuk pertanyaan terpisah. ;-)

— Ben Blank

Saya tahu, saya hanya berpikir Anda sangat pintar sehingga kita bisa membunuh dua burung dengan satu batu: p Oh, baiklah, Google memberikan solusi. Terima kasih lagi :)

— mpen

Jika Anda masih memiliki tautannya, saya ingin melihat tekniknya.

— Ben Blank

1

terima kasih untuk contohnya! Hal ini styletidak stle :)

— msroot

45

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

— Roman Sklyarov
sumber

4

Licik ... membalikkan urutan. Saya suka itu.

— mpen

30

Jawaban Ben Blank bagus, tapi pemudarannya, bagi saya, mengganggu. Coba lakukan fading in setelah Anda menambahkan:

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

— Derek Illchuk
sumber

1

Saya setuju sepenuhnya, pendekatan ini akan menghindari render satu bingkai yang akan menyebabkan flicker ... hanya sedikit lebih kemahiran

— Paul Carroll

Terima kasih - ini memperbaiki kesalahan bagi saya di mana tata letak / pemosisian item yang akan muncul tidak konsisten saat melakukan keduanya pada saat yang bersamaan.

— Frax

3

Cobalah!

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

— Ogait
sumber

2

Coba ini:

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

— Wessam El Mahdy
sumber

0

Inilah solusi yang saya gunakan:

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

Ini berfungsi dengan uploadify . Ini menggunakan loadacara jquery untuk menunggu gambar selesai dimuat sebelum muncul. Tidak yakin apakah ini pendekatan terbaik, tetapi berhasil untuk saya.

— mpen
sumber