JQuery fadeIn() on DOM element creation?

Question

How do I create a DOM element in JQuery and fade it in to show up, instead of having it show up immediately?

I try this:

var myDiv = "<div>Hello!</div>"
$("somePlace").after(myDiv).fadeIn('fast');

but this doesn't work, since the .after(myDiv) makes it popup immediately. Any solutions? Thanks!

Answer 1

Add it with a class which is hidden at the start.

<style>
.hidden {
  display:none;
}
</style>

<div class="hidden">
 Won't be seen.
</div>

Answer 2

$("<div>Hello</div>").hide().appendTo("somePlace").fadeIn("fast");