In this post we are going to show : how you can apply fade in & fade out effect to an <div> element with the JQuery fadeIn & fadeOut function. Although this tutorial aims at applying effects to the <div> element you can almost apply these effects to any html element like <p>, <img>, <table> and so on using the same method. So lets start.
You are all set and ready to go. Check out the demo given below.
Hope you liked our post if you did please link this post to you blog our website and do comment.
- First of all you need to download the JQuery plugin file from http://jquery.com/ to know more about including and using JQuery file read our post downloading and including JQuery API
- Create a simple html file with one div & two button as shown below
<html> <head> </head> <body> <div id="fade"></div> <input type="button" id="fi" value="Fade In"></input> <input type="button" id="fo" value="Fade Out"></input> </body> </html>
- Then embed the downloaded JQuery file in your html file between the <head> tag using the <script> tag as shown below
<head> <!-- -------------- path of your downloaded jquery file goes inside 'src' attribute ------------ --> <script type="text/javascript" src="JQuery.js"></script> </head>
- After that add another script tag in <head> and write your JQuery code to fade the element as shown below
<script type="text/javascript"> $(document).ready(function(){ $("#fi").click(function(){ $("#fade").fadeIn("slow"); // u can use 'slow','fast' or numbers in milliseconds to control the speed of transition }); $("#fo").click(function(){ $("#fade").fadeOut("slow"); // u can use 'slow','fast' or numbers in milliseconds to control the speed of transition }) }); </script>
You are all set and ready to go. Check out the demo given below.
Hope you liked our post if you did please link this post to you blog our website and do comment.
Happy Programming !
No comments :
Post a Comment