JQuery append fadeIn

Question

Similar: Using fadein and append

But the solutions do not work for me. I'm trying to:

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

But then the whole list disappears immediately, and not as each item is added. It appears that hide() and fadeIn() apply to $('#thumbnails') , not to <li> . How can I make them address this instead? This also does not work:

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

Other offers?

Answer 1

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

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

It uses the dollar function to build <li> ahead of time. You can also write it on two lines, of course, if that becomes clearer:

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

Edit: Your second attempt also almost exists, but you need to use children() instead of filter() . The latter removes nodes only from the current request; your newly added item is not in this request, but instead is a child node.

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

Answer 2

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

Answer 3

Ben Blanc's answer is good, but the fading out for me is buggy. Try fading out after adding:

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

Answer 4

Give it a try!

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

Answer 5

Try the following:

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

Answer 6

Here is 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 the jquery load event to wait until the image has finished loading before it appears. Not sure if this is the best approach, but it worked for me.