jQuery append fadeIn

Question

But the solutions there aren't working for me. I'm trying:

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

But then the whole list fades in at once, not as each item is added. It looks like hide() and fadeIn() are being applied to $('#thumbnails') not the <li>. How would I get them to apply to that instead? This doesn't work either:

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

Other suggestions?

Ben Blank · Accepted Answer · 2021-09-22 18:25:05Z

208

Your first attempt is very close, but remember that append() is returning #thumbnails, not the item you just added to it. Instead, construct your item first and apply the hide().fadeIn() before adding it:

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

This uses the dollar function to construct the <li> ahead of time. You could also write it on two lines, of course, if that makes it clearer:

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

Edit: Your second attempt is also almost there, but you need to use children() instead of filter(). The latter only removes nodes from the current query; your newly-added item isn't in that query, but is a child node instead.

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

edited Sep 22, 2021 at 18:25

answered Jun 11, 2009 at 0:09

Ben Blank

57k28 gold badges133 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

mpen Over a year ago

Beautiful! Works perfectly. You wouldn't happen to know how to delay starting the fade until the thumbnail has finished loading too would you?

Ben Blank Over a year ago

Not off the top of my head, but "how do I trigger a function when an image finishes loading" isn't a bad idea for a separate question. ;-)

mpen Over a year ago

I know, I just thought you were so smart we could kill two birds with one stone :p Oh well, Google provided a solution. Thanks again :)

Ben Blank Over a year ago

If you still have the link handy, I'd love to see the technique.

msroot Over a year ago

thanks for the example! It is style not stle :)

|

Roman Sklyarov · Accepted Answer · 2011-06-30 11:41:51Z

48

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

answered Jun 30, 2011 at 11:41

Roman Sklyarov

9718 silver badges20 bronze badges

1 Comment

mpen Over a year ago

Sneaky...reversing the order. I like it.

Community · Accepted Answer · 2017-05-23 12:18:10Z

32

Ben Blank's answer is good, but the fading, for me, is glitchy. Try fading in after you append:

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

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered Dec 4, 2009 at 17:18

Derek Illchuk

5,6581 gold badge31 silver badges29 bronze badges

2 Comments

Paul Carroll Over a year ago

I agree completely, this approach will avoid the one frame render that will cause a flicker... just that bit more finesse

frax Over a year ago

Thanks - this fixed a glitch for me where the layout/positioning of the item that was about to appear was inconsistent when doing them both at the same time.

Vaibhav Bhanushali · Accepted Answer · 2013-10-21 07:19:39Z

4

Try it!

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

edited Oct 21, 2013 at 7:19

Vaibhav Bhanushali

6533 gold badges13 silver badges32 bronze badges

answered Oct 20, 2013 at 20:00

Ogait

524 bronze badges

Comments

Wessam El Mahdy · Accepted Answer · 2016-03-02 10:56:17Z

2

Try this:

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

answered Mar 2, 2016 at 10:56

Wessam El Mahdy

4676 silver badges15 bronze badges

Comments

mpen · Accepted Answer · 2014-10-23 22:00:46Z

Here's the solution I went with:

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

This works with uploadify. It uses jquery's load event to wait for the image to finish loading before it appears. Not sure if this is the best approach, but it worked for me.

Zoltán Szabó · Accepted Answer · 2021-12-05 11:11:32Z

0

This works:

var infoszoveg = '<div class="kosarba-info" style="display:none"><div class="notice"> A termék bekerült a kosaradba! » </div></div>';

$(infoszoveg).fadeIn(500).appendTo('.kosar-ikon');

answered Dec 5, 2021 at 11:11

Zoltán Szabó

111 bronze badge

Comments

Kaushal · Accepted Answer · 2023-06-11 13:48:46Z

0

$('#target').append($(serverResponseHTMLString).hide().fadeIn(1000));

answered Jun 11, 2023 at 13:48

Kaushal

6726 silver badges16 bronze badges

1 Comment

Ghost Over a year ago

Your answer contains code without explanation. It's better to include details about how your answer answers the question.

Collectives™ on Stack Overflow

jQuery append fadeIn

8 Answers 8

7 Comments

1 Comment

2 Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

7 Comments

1 Comment

2 Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related