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?

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?

• javascript
• jquery

3 Answers 3

You could do something like:

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

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

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