jQuery добавить fadeIn

97

Похоже на: Использование fadein и append

Но решения там не работают. Я стараюсь:

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

Другие предложения?

jquery mpen
источник

Ответы:

199

Ваша первая попытка очень близка, но помните, что 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);
Бен Бланк
источник
1
Прекрасный! Прекрасно работает. Вы бы случайно не знали, как отложить запуск затухания до тех пор, пока эскиз не загрузится, не так ли?
mpen
Не в голове, но «как запустить функцию, когда изображение завершает загрузку» - неплохая идея для отдельного вопроса. ;-)
Бен Бланк
Я знаю, я просто подумал, что ты такой умный, что мы можем убить двух зайцев одним выстрелом: p Да ладно, Google предоставил решение.
Еще
Если у вас все еще есть ссылка, я бы хотел увидеть эту технику.
Бен Бланк,
1
спасибо за пример! Это styleне так stle :)
msroot
45 
$('<li><img src="/photos/t/'+data.filename+'"/></li>')
    .appendTo('#thumbnails')
    .hide().fadeIn(2000);
Роман Скляров
источник
4
Подлый ... поменять порядок. Мне это нравится.
mpen
30

Ответ Бена Бланка хорош, но затухание для меня вызывает глюки. Попробуйте исчезнуть после добавления:

var item = $('<li><img src="/photos/t/'+data.filename+'"/></li>').hide();
$('#thumbnails').append(item);
item.fadeIn(2000);
Дерек Ильчук
источник
1
Я полностью согласен, этот подход позволит избежать рендеринга одного кадра, который вызовет мерцание ... просто немного больше изящества
Пол Кэрролл
Спасибо - это устранило для меня сбой, когда макет / позиционирование элемента, который должен был появиться, было несовместимым при выполнении обоих одновременно.
frax
3

Попытайся!

 $('#thumbnails').append(<li> your content </li>);
 $('#thumbnails li:last').hide().fadeIn(2000);
Ogait
источник
2

Попробуй это:

$('<li><img src="/photos/t/'+data.filename+'"/></li>').hide().appendTo('#thumbnails').fadeIn(2000);
Вессам Эль-Махди
источник
0

Вот решение, с которым я пошел:

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, чтобы дождаться завершения загрузки изображения, прежде чем оно появится. Не уверен, что это лучший подход, но у меня он сработал.

mpen
источник