Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 327
mrpatg Avatar asked Aug 02 '09 07:08

mrpatg


People also ask

How do you fade in Javascript?

The jQuery fadeIn() method is used to fade in a hidden element. Syntax: $(selector).fadeIn(speed,callback);

What is fadeIn in jQuery?

jQuery fadeIn() Method The fadeIn() method gradually changes the opacity, for selected elements, from hidden to visible (fading effect). Note: Hidden elements will not be displayed at all (no longer affects the layout of the page).


1 Answers

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>
like image 72
Rohit Tagadiya Avatar answered Oct 07 '22 13:10

Rohit Tagadiya