jQuery append fadeIn

97

Mas as soluções não estão funcionando para mim. Estou tentando:

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

Mas então toda a lista desaparece de uma vez, não conforme cada item é adicionado. Parece hide()e fadeIn()está sendo aplicado a $('#thumbnails')não <li>. Como eu faria com que eles se candidatassem a isso? Isso também não funciona:

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

Outras sugestões?

jquery

— mpen
fonte

199

Sua primeira tentativa está muito perto, mas lembre-se de que ela append()está voltando #thumbnails, não o item que você acabou de adicionar. Em vez disso, construa seu item primeiro e aplique o hide().fadeIn()antes de adicioná-lo:

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

Isso usa a função dólar para construir o <li>antecipadamente. Você também pode escrever em duas linhas, é claro, se isso deixar mais claro:

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

Edit: Sua segunda tentativa também está quase lá, mas você precisa usar em children()vez de filter(). O último remove apenas nós da consulta atual; seu item recém-adicionado não está nessa consulta, mas é um nó filho.

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

— Ben Blank
fonte

1

Lindo! Funciona perfeitamente. Você não saberia como atrasar o início do esmaecimento até que a miniatura terminasse de carregar, saberia?

— maio

Não de cabeça, mas "como faço para ativar uma função quando uma imagem termina de carregar" não é uma má ideia para uma pergunta separada. ;-)

— Ben Blank

Eu sei, apenas pensei que você fosse tão inteligente que poderíamos matar dois coelhos com uma cajadada: p Bem, o Google forneceu uma solução. Obrigado novamente :)

— mpen

Se você ainda tiver o link em mãos, adoraria ver a técnica.

— Ben Blank

1

obrigado pelo exemplo! É stylenão stle :)

— msroot

45

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

— Roman Sklyarov
fonte

4

Sneaky ... invertendo a ordem. Eu gosto disso.

— mpen

30

A resposta de Ben Blank é boa, mas o desbotamento, para mim, é problemático. Tente desaparecer depois de acrescentar:

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

— Derek Illchuk
fonte

1

Concordo plenamente, essa abordagem evitará a renderização de um quadro que causará cintilação ... apenas um pouco mais de sutileza

— Paul Carroll

Obrigado - isso corrigiu uma falha para mim em que o layout / posicionamento do item que estava prestes a aparecer era inconsistente ao fazer os dois ao mesmo tempo.

— frax

3

Tente!

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

— Ogait
fonte

2

Experimente isto:

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

— Wessam El Mahdy
fonte

0

Aqui está a solução que escolhi:

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

Isso funciona com uploadify . Ele usa o loadevento jquery para esperar que a imagem termine de carregar antes de aparecer. Não tenho certeza se essa é a melhor abordagem, mas funcionou para mim.

— mpen
fonte