How to fade in appended HTML with jQuery?

Question

I have the following line of code:

var html = "...";
$("#id_name").append(html).fadeIn("slow");

This causes the entire div #id_name to fade in. I want only the appended HTML to fade in. How can this be accomplished?

Answer 1

You could do something like:

$('<div></div>').appendTo("#id_name").hide().append(html).fadeIn('slow');

Answer 2

you'd have to make sure the variable "html" is a jquery object first , and present in the DOM.

So you'd typically fire a callback function, fired when the append() is effective.

example:

$("#id_name").append(html,function(){
 $(html).fadeIn("slow");
});

Answer 3

This should also work (assuming the html var is a snippet of html code) and may be a bit more readable:

$(html).appendTo('#id_name').hide().fadeIn('slow');