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".

possible duplicate of [Using fadein and append](http://stackoverflow.com/questions/327682/using-fadein-and-append) — user, Mar 22 '14 at 17:20

score 272 · Accepted Answer · answered Jan 14 '11 at 03:02

272

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

answered Jan 14 '11 at 03:02

icktoofay

126,289
21
250
231

1

I want just the new "blah" div to fade in. – TIMEX Jan 14 '11 at 03:03
@TIMEX: That's what this should do. – icktoofay Jan 14 '11 at 03:03
Is there a reason you first hide then append (because it's faster to first set a style before attaching to the DOM, or something like that) or does it not make a difference? – qwertymk Jan 14 '11 at 03:12
2

@qwertymk: There's no real reason. If browsers ever rendered while the DOM was still being manipulated (which no browser currently does as far as I know), there wouldn't be any flash of the content before it started fading in. Again, not really important. – icktoofay Jan 14 '11 at 03:15
I don't 100% get why this works but thank you very much. – Jonesopolis Jan 14 '14 at 19:41
Actually, it **is** important to use hide() first (or equivalent) because fadeIn() won't work on an item unless it is hidden/display set to none. See this [jsFiddle](http://jsfiddle.net/Lfs1Lg9o/1/). – EF0 Sep 22 '14 at 20:05
@EF0: I think you misunderstood the discussion; the question was not whether `hide` was required or not, but whether it must come before or after the `appendTo`. (Verdict: it shouldn’t matter.) – icktoofay Sep 23 '14 at 02:06
My bad - rereading it now I see that. Will leave my comment in case it adds value for a future reader by making it clear(er) why the `hide()` is important - wherever it's placed before the `fadeIn()`. – EF0 Sep 23 '14 at 14:34
Brilliant! Yet, you can do `$('#blah').hide().appendTo('#blah').fadeIn(1000);` if you only want your div to fade in – Arthur Tarasov Jul 29 '17 at 09:04
1

@ArthurTarasov: That appends `#blah` to itself, which doesn't seem like something you want to do (and I'm guessing it's interpreted as a no-op). You might as well just drop the `.appendTo` part and use `$('#mycontent').hide().fadeIn(1000)`. – icktoofay Dec 13 '17 at 08:48

score 54 · Answer 2 · answered Jan 14 '11 at 03:11

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.

score 22 · Answer 3 · answered Mar 12 '13 at 03:55

22

This also works

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

Regards

answered Mar 12 '13 at 03:55

Mohd Sakib

471
5
11

This is the most aesthetically pleasing way to handle fading in as it allows for the HTML to be fully composed and create the dimensions it needs before fading in. – Antonio Nogueras Aug 30 '19 at 18:23

score 0 · Answer 4 · answered Feb 27 '20 at 16:50

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

Append an element with fade in effect [jQuery]

4 Answers4

Linked