Fade Effect : JQuery
In this part of tutorial we are going to learn about the fade effect in JQuery. With jquery we can fade an element in and out of visibility.
Jquery have the following fade method :
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
$(selector).fadeIn(speed,callback);
Below is an example :
1 2 3 | $("button").click(function(){ $("#div1").fadeIn("slow"); }); |
Here on the click of button the div with id="div1" gets fade slowly as we have provided the parameter "slow". we can also provide timing for fade effect in the parameter in terms of milliseconds.
Below is a complete working code :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <html> <head> <title>First jquery example</title> <!-- This line will load the bootstrap css file --> <link rel="stylesheet" type="text/css" href="bootstrap.min.css"> <!-- This file will load jquery file so that we can use its function --> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> </head> <body> <div class="panel panel-primary"> <h3 class="text-primary" align="center"> jquery example : fade</h3> </div> <div id="div1" class="panel panel-primary" style="display:none;back-ground:purple"> <p align="center" class="text text-primary">This is a sample text with id="1" which is going to get fade on the click of button below</p> </div> <div align="center"> <button name="button" value="Click here to show" class="btn btn-md btn-primary">Click here to show</button> </div> </body> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeIn("slow"); }); }); </script> </html> |
You can get this working code on git as well.
I hope you are enjoying this tutorial. We are going to have more fun on jquery in our further posts.
0 comments:
Post a Comment