jQuery ต่อท้าย fadeIn

คล้ายกับ: ใช้เฟดอินและต่อท้าย

แต่วิธีแก้ปัญหาไม่ได้ผลสำหรับฉัน ฉันกำลังพยายาม:

 $('#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>ล่วงหน้า คุณสามารถเขียนเป็นสองบรรทัดได้หากทำให้ชัดเจนขึ้น:

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

แก้ไข:พยายามครั้งที่สองของคุณคือยังเกือบจะมี แต่คุณจำเป็นต้องใช้แทนchildren() filter()ส่วนหลังจะลบโหนดออกจากแบบสอบถามปัจจุบันเท่านั้น รายการที่เพิ่มใหม่ของคุณไม่ได้อยู่ในแบบสอบถามนั้น แต่เป็นโหนดลูกแทน

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

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

คำตอบของ Ben Blankนั้นดี แต่การซีดจางสำหรับฉันนั้นผิดพลาด ลองเฟดเข้ามาหลังจากที่คุณต่อท้าย:

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

ลองมัน!

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

ลองสิ่งนี้:

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

นี่คือวิธีแก้ปัญหาที่ฉันใช้:

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 ใช้loadเหตุการณ์ของ jquery เพื่อรอให้ภาพโหลดเสร็จก่อนที่จะปรากฏ ไม่แน่ใจว่านี่เป็นแนวทางที่ดีที่สุดหรือไม่ แต่ใช้ได้ผลกับฉัน