How to fade in a div on page load?

Question

I'm using jQuery. I need a div to fade in when the page loads.

<div id=monster></div>

How can I achieve this?

Answer 1

It cannot be simpler:

$(function(){  // $(document).ready shorthand
  $('#monster').fadeIn('slow');
});

If your div is not initially hidden, you could hide it before the animation:

 $('#monster').hide().fadeIn('slow');

The speed parameter can be 'slow' , 'normal' , 'fast' or the number of milliseconds to run the animation.

Answer 2

jQuery/fadeIn

$(function() {
    $("#monster").fadeIn();
});

Answer 3

See working demo

 $('#monster').hide().fadeIn('slow');

 #monster{ width: 200px; height: 100px; border: 1px solid #0095ff; border-radius: 5px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id=monster> <pre> This is demo text. This is demo text. This is demo text. This is demo text. </pre> </div>