jQuery append fadeIn

97

Ma le soluzioni non funzionano per me. Sto provando:

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

Ma poi l'intero elenco si dissolve in una volta, non quando viene aggiunto ogni elemento. Sembra che hide()e fadeIn()vengono applicati a $('#thumbnails')non <li>. Come posso convincerli ad applicare a quello invece? Anche questo non funziona:

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

Altri suggerimenti?

jquery

— mpen
fonte

199

Il tuo primo tentativo è molto vicino, ma ricorda che append()sta tornando #thumbnails, non l'oggetto che hai appena aggiunto. Invece, costruisci prima il tuo oggetto e applica hide().fadeIn()prima di aggiungerlo:

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

Questo utilizza la funzione dollaro per costruire l' <li>anticipo. Potresti anche scriverlo su due righe, ovviamente, se questo lo rende più chiaro:

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

Modifica: anche il tuo secondo tentativo è quasi arrivato, ma devi usare al children()posto di filter(). Quest'ultimo rimuove solo i nodi dalla query corrente; il tuo elemento appena aggiunto non è in quella query, ma è invece un nodo figlio.

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

— Ben Blank
fonte

1

Bellissimo! Funziona perfettamente. Non sapresti come ritardare l'avvio della dissolvenza fino al termine del caricamento della miniatura, vero?

— mpen

Non fuori dalla mia testa, ma "come faccio ad attivare una funzione quando un'immagine termina il caricamento" non è una cattiva idea per una domanda a parte. ;-)

— Ben Blank

Lo so, pensavo solo che fossi così intelligente che avremmo potuto prendere due piccioni con una fava: p Oh beh, Google ha fornito una soluzione. Grazie ancora :)

— mpen

Se hai ancora il link a portata di mano, mi piacerebbe vedere la tecnica.

— Ben Blank,

1

grazie per l'esempio! È styleNon stle :)

— msroot

45

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

— Roman Sklyarov
fonte

4

Subdolo ... invertendo l'ordine. Mi piace.

— mpen

30

La risposta di Ben Blank è buona, ma la dissolvenza, per me, è glitch. Prova a sfumare dopo aver aggiunto:

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

— Derek Illchuk
fonte

1

Sono completamente d'accordo, questo approccio eviterà il rendering di un fotogramma che causerà uno sfarfallio ... solo un po 'più di finezza

— Paul Carroll

Grazie - questo ha risolto un problema tecnico per me in cui il layout / posizionamento dell'elemento che stava per apparire era incoerente quando si eseguivano entrambi allo stesso tempo.

— frax

3

Provalo!

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

— Ogait
fonte

2

Prova questo:

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

— Wessam El Mahdy
fonte

0

Ecco la soluzione che ho scelto:

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

Funziona con uploadify . Utilizza l' loadevento di jquery per attendere il completamento del caricamento dell'immagine prima che appaia. Non sono sicuro che questo sia l'approccio migliore, ma per me ha funzionato.

— mpen
fonte