jQuery append fadeIn

Tương tự như: Sử dụng fadein và append

Nhưng các giải pháp ở đó không hiệu quả với tôi. Tôi đang cô:

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

Nhưng sau đó toàn bộ danh sách biến mất cùng một lúc, không phải khi từng mục được thêm vào. Nó trông giống như hide()và fadeIn()đang được áp dụng cho $('#thumbnails')không phải <li>. Làm cách nào để tôi yêu cầu họ đăng ký điều đó? Điều này cũng không hoạt động:

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

Các đề xuất khác?

Nỗ lực đầu tiên của bạn đã rất gần, nhưng hãy nhớ rằng nó append()đang quay trở lại #thumbnails, không phải mục bạn vừa thêm vào nó. Thay vào đó, hãy xây dựng mục của bạn trước và áp dụng hide().fadeIn()trước khi thêm nó:

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

Điều này sử dụng hàm đô la để xây dựng <li>trước thời hạn. Tất nhiên, bạn cũng có thể viết nó trên hai dòng nếu điều đó làm cho nó rõ ràng hơn:

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

Chỉnh sửa: Nỗ lực thứ hai của bạn cũng gần đạt được, nhưng bạn cần sử dụng children()thay thế filter(). Cái sau chỉ loại bỏ các nút khỏi truy vấn hiện tại; mục mới thêm của bạn không có trong truy vấn đó, nhưng thay vào đó là một nút con.

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

Câu trả lời của Ben Blank là tốt, nhưng đối với tôi, việc phai nhạt dần là trục trặc. Thử mờ dần sau khi bạn nối:

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

Thử nó!

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

Thử cái này:

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

Đây là giải pháp tôi đã sử dụng:

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

Điều này hoạt động với tải lên . Nó sử dụng loadsự kiện của jquery để đợi hình ảnh tải xong trước khi xuất hiện. Không chắc liệu đây có phải là cách tốt nhất hay không, nhưng nó đã hiệu quả với tôi.