CODEWITHSUNDEEP
javascriptjquery
mrpatg
mrpatg

Reputation: 10117

How to fade in a div on page load?

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

<div id=monster></div>

How can I achieve this?

Upvotes: 12

Views: 55137

Answers (3)

Rohit Tagadiya
Rohit Tagadiya

Reputation: 3730

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>

Upvotes: 1

Joe Chung
Joe Chung

Reputation: 12123

jQuery/fadeIn

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

Upvotes: 5

Christian C. Salvad&#243;
Christian C. Salvad&#243;

Reputation: 827256

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.

Upvotes: 38

Related Questions