Hello everyone! Here you can learn how to fade elemnts in with JavaScript! You know Google's homepage how the elements fade in? Well, you can do that same thing! (But it wont be on hover, it will be on load) So, here are the steps and codes!


First, here is the demo: Click here to see the demo

 

Now, let's get to the coding! First, make a div on the page and give it a class name of: fade Now, put your content in and everything and put in style="display:none;" on that div. Now, add this code right before the div:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> <script type="text/javascript"> $(document).ready(function(){ $('#div_id_or_class').fadeIn(4000); }); </script>

 Now, here is what a full code would look like:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">

<script type="text/javascript"> $(document).ready(function(){ $('#fade_div').fadeIn(4000); }); </script> <div id="fade_div" style="display:none;"> <font color="green" size="3" style="font-weight:bold;">I just faded in!</b> </div>


 

Just copy this code right below here and it's yours forever! 

------------------------------------------------------------------------------------------------

<!--

Created by Free Scripts & HTML codes - http://free-scripts.yolasite.com

Get more FREE scripts and codes here: http://free-scripts.yolasite.com

THIS NOTICE MUST STAY INTACT IN ORDER FOR THIS TO BE LEGAL FOR YOU TO USE

-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">

<script type="text/javascript"> $(document).ready(function(){ $('#fade_div').fadeIn(4000); }); </script> <div id="fade_div" style="display:none;"> <font color="green" size="3" style="font-weight:bold;">I just faded in!</b> </div>

------------------------------------------------------------------------------------------------

 

This free website was made using Yola.

No HTML skills required. Build your website in minutes.

Go to www.yola.com and sign up today!

Make a free website with Yola