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-22T18:25:05.140

207

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 '21 at 18:25

answered Jun 11 '09 at 00:09

Ben Blank

54,908
28
127
156

1

Beautiful! Works perfectly. You wouldn't happen to know how to delay starting the fade until the thumbnail has finished loading too would you? – mpen Jun 11 '09 at 00:29
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. ;-) – Ben Blank Jun 11 '09 at 17:01
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 :) – mpen Jun 11 '09 at 19:24
If you still have the link handy, I'd love to see the technique. – Ben Blank Jun 11 '09 at 23:52
Yeah, I have to agree that Ben seems quite smart to catch all that ;) Also, I agree that it would be nice to have the google solution in here IMHO. – Rob Sep 25 '09 at 19:26
@Rob & Ben: Hey guys, sorry I didn't see your comments earlier. I managed to dig up the code I used, I'll add it to my answer. – mpen Dec 05 '09 at 01:38
1

thanks for the example! It is `style` not `stle` :) – msroot Apr 20 '17 at 11:33

score 48 · Answer 2 · answered Jun 30 '11 at 11:41

48

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

answered Jun 30 '11 at 11:41

Roman Sklyarov

949
8
20

4

Sneaky...reversing the order. I like it. – mpen Jun 30 '11 at 18:02

score 32 · Answer 3 · edited May 23 '17 at 12:18

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 '17 at 12:18

Community

1
1

answered Dec 04 '09 at 17:18

Derek Illchuk

5,638
1
29
29

1

I agree completely, this approach will avoid the one frame render that will cause a flicker... just that bit more finesse – Paul Carroll Apr 28 '14 at 05:55
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. – frax Mar 23 '15 at 20:11

score 4 · Answer 4 · edited Oct 21 '13 at 07:19

4

Try it!

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

edited Oct 21 '13 at 07:19

Vaibhav Bhanushali

643
3
12
32

answered Oct 20 '13 at 20:00

Ogait

52
4

score 2 · Answer 5 · answered Mar 02 '16 at 10:56

2

Try this:

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

answered Mar 02 '16 at 10:56

Wessam El Mahdy

457
5
14

score 0 · Answer 6 · answered Oct 23 '14 at 22:00

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.

score 0 · Answer 7 · answered Dec 05 '21 at 11:11

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 05 '21 at 11:11

Zoltán Szabó

11
1

score 0 · Answer 8 · answered Jun 11 '23 at 13:48

0

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

answered Jun 11 '23 at 13:48

Kaushal

666
6
15

1

Your answer contains code without explanation. It's better to include details about *how* your answer answers the question. – Kevin M. Mansour Jun 11 '23 at 15:47

jQuery append fadeIn

8 Answers8

Linked

Related