Append an element with fade in effect [jQuery]


Javascript Problem Overview

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


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

Javascript Solutions

Solution 1 - Javascript


Solution 2 - Javascript

Adding a little more info:

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


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:


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.

Solution 3 - Javascript

This also works



Solution 4 - Javascript

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

  return html.hide();



All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionTIMEXView Question on Stackoverflow
Solution 1 - JavascripticktoofayView Answer on Stackoverflow
Solution 2 - JavascriptPablo FernandezView Answer on Stackoverflow
Solution 3 - JavascriptMohd SakibView Answer on Stackoverflow
Solution 4 - JavascriptcristisstView Answer on Stackoverflow