jQuery append fondu

97

Similaire à: Utilisation du fondu et de l'ajout

Mais les solutions ne fonctionnent pas pour moi. J'essaie:

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

Mais alors la liste entière disparaît à la fois, pas au fur et à mesure que chaque élément est ajouté. On diraithide() à et fadeIn()sont appliqués à $('#thumbnails')pas <li>. Comment pourrais-je les amener à appliquer à la place? Cela ne fonctionne pas non plus:

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

D'autres suggestions?

jquery

— mpen
source

199

Votre première tentative est très proche, mais rappelez-vous qu'il append()s'agit d'un retour #thumbnails, pas de l'élément que vous venez d'y ajouter. Au lieu de cela, construisez d'abord votre élément et appliquez le hide().fadeIn()avant de l'ajouter:

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

Cela utilise la fonction dollar pour construire l' <li>avance du temps. Vous pouvez également l'écrire sur deux lignes, bien sûr, si cela le rend plus clair:

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

Edit: Votre deuxième tentative est également presque là, mais vous devez utiliser à la children()place de filter(). Ce dernier supprime uniquement les nœuds de la requête courante; votre élément nouvellement ajouté ne figure pas dans cette requête, mais est plutôt un nœud enfant.

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

— Ben Blank
source

1

Belle! Fonctionne parfaitement. Vous ne sauriez pas comment retarder le démarrage du fondu jusqu'à ce que la vignette ait fini de se charger, n'est-ce pas?

— mpen

Pas par hasard, mais "comment puis-je déclencher une fonction quand une image finit de se charger" n'est pas une mauvaise idée pour une question distincte. ;-)

— Ben Blank

Je sais, je pensais juste que vous étiez si intelligent que nous pourrions faire d'une pierre deux coups: p Eh bien, Google a fourni une solution. Merci encore :)

— mpen

Si vous avez toujours le lien à portée de main, j'aimerais voir la technique.

— Ben Blank

1

merci pour l'exemple! Ce n'est stylepas stle :)

— msroot

45

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

— Roman Sklyarov
source

4

Sneaky ... inversant l'ordre. Je l'aime.

— mpen

30

La réponse de Ben Blank est bonne, mais la décoloration, pour moi, est glitch. Essayez de fondre après avoir ajouté:

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

— Derek Illchuk
source

1

Je suis tout à fait d'accord, cette approche évitera le rendu d'une image qui causera un scintillement ... juste un peu plus de finesse

— Paul Carroll

Merci - cela a corrigé un problème pour moi où la mise en page / le positionnement de l'élément qui était sur le point d'apparaître était incohérent lorsque vous les faisiez tous les deux en même temps.

— frax

3

Essayez-le!

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

— Ogait
source

2

Essaye ça:

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

— Wessam El Mahdy
source

0

Voici la solution avec laquelle je suis allé:

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

Cela fonctionne avec uploadify . Il utilise l' loadévénement de jquery pour attendre la fin du chargement de l'image avant d'apparaître. Je ne sais pas si c'est la meilleure approche, mais cela a fonctionné pour moi.

— mpen
source