Insert HTML string on page, with fade in

Question

Good use the following code in jquery to add a div on the site:

$("body").append('<div class="shadow-full"></div>');

But it appears at once, wanted to put an effect to it appear more softly, has how to do this?

Answer 1

You gotta break it up into steps.

• converts this HTML string into an element
• hides it
• inserts it into the DOM
• fade in

To do this "It’s there jQuery" could be so:

$('<div class="shadow-full">Teste!</div>')
  .hide()
  .appendTo("body")
  .fadeIn(1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>