jQuery додати fadeIn

Схожий на: Використання 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);

Відповідь Бена Бланка хороша, але для мене завмирання - глюка. Спробуйте зникнути після додавання:

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, щоб зачекати, поки зображення закінчиться, перш ніж воно з’явиться. Не впевнений, чи це найкращий підхід, але він працював на мене.