jQuery append fadeIn

Similar to: https://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?

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

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

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

Try it!

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

Try this:

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

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.

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