jQuery append fadeIn
<p>Similar to: <a href="http://stackoverflow.com/questions/327682/using-fadein-and-append">http://stackoverflow.com/questions/327682/using-fadein-and-append</a></p>

<p>But the solutions there aren't working for me. I'm trying:</p>

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

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

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

<p>Other suggestions?</p>

<p><hr></p>

<p>Here's the solution I went with:</p>

<pre><code>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 = $('&lt;li id="thumb-' + data.photo_id + '"&gt;&lt;a href="#" onclick="deletePhoto(' + data.photo_id + ')" class="delete" alt="Delete"&gt;&lt;/a&gt;&lt;a href="#" class="edit" alt="Edit"&gt;&lt;/a&gt;&lt;div class="thumb-corners"&gt;&lt;/div&gt;&lt;img class="thumbnail" src="/photos/t/' + data.filename + '" width=150 height=150/&gt;&lt;/li&gt;');
   $('#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);
  }
 }
}
</code></pre>

<p>This works with <a href="http://www.uploadify.com/">uploadify</a>. It uses jquery's <code>load</code> 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.</p>
