The web page fade in effect with JavaScript is very popular many years ago. The fade in effect is even much easier to achieve with jQuery. The jQuery fadeIn() method will changes the opacity of selected element from hidden to visible, thus creating the fading animation effect.

The following is the fade in effect made with jQuery:

Here’s the file contents of the above example:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Fade In Effect</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

    $(document).ready(function(){

        $('#fadeInEffect').fadeIn(7000);

    });

</script>
</head>
<body>

<div id="fadeInEffect" style="display:none;">
    <img src="nativity.png" width="300" height="284">
</div>

</body>
</html>

The jQuery codes are quite simple. The only thing need to mention is that the contents of the selected element need to be hidden at the beginning, thus allow the Div layer animating from hidden to visible. The Div layer can easily be hidden by setting the style to “display:none”.

<div id="fadeInEffect" style="display:none;">

The jQuery post discussed how to create a fade in effect with jQuery.