jQuery append fadeIn

Question

Similar to: http://stackoverflow.com/questions/327682/using-fadein-and-append

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?

---

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.

Answer 1

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 stle="display:none"><img src="/photos/t/'+data.filename+'"/></li>').children(':last').hide().fadeIn(2000);

Answer 2

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