Append an element with fade in effect [jQuery]

Question

var html = "<div id='blah'>Hello stuff here</div>"

$("#mycontent").append(html).fadeIn(999);

This doesn't seem to work.

I just want a cool effect when the content gets appended.

Note: I want just the new "blah" div to fade in, not the entire "mycontent".

Answer 1

$(html).hide().appendTo("#mycontent").fadeIn(1000);

Answer 2

Adding a little more info:

jQuery implements "method chaining", which means you can chain method calls on the same element. In the first case:

$("#mycontent").append(html).fadeIn(999);

you would be applying the fadeIn call to the object which is target of the method chain, in this case #mycontent . Not what you want.

In @icktoofay's (great) answer you have:

$(html).hide().appendTo("#mycontent").fadeIn(1000);

This basically means, create the html , set it as hidden by default, append it to #mycontent and then fade it in. The target of the method chain now is hmtl instead of #mycontent .

Answer 3

This also works

$(Your_html).appendTo(".target").hide().fadeIn(300);

Regards

Answer 4

since the fadeIn is a transition from hide to show, you'll have to hide the "html" element when you append it and then to show it.

 var html = "<div id='blah'>Hello stuff here</div>" $("#mycontent").append(function(){ return html.hide(); }); $('#blah').fadeIn(999);