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

Jawaban:

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