Animation in Jquery
Jquery allows us to create some custom animation.
Syntax :
$(selector).animate({params},speed,callback);
Now let us have a look on the syntax, animate() method is used to create some custom animation. In the parameters of animate method we have params which is a required parameter and is used to specify the css properties to be animated on the selected element. The second parameter is speed which is an optional attribute that can takes the value "slow", "fast" or milliseconds.
The last parameter is callback function which is an optional parameter that should be executed after the completion of current effect
Example :
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 31 32 33 34 35 36 | <html> <head> <title>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 : animate() method</h3> </div> <div id="div1" class="panel panel-primary" align="center"><br> <button align="center" class="btn btn-md btn-primary">Click here to see animation</button> <br><br> </div> <div id="div2" align="center" style="background-color:yellow;" class="panel panel-primary"> <p align="center" style="background-color:yellow;height:100px;width:80px;" class="text text-primary" >This is the under the div with id="div2"</p> </div> </body> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("#div2").animate({ left:'250px', opacity:'0.5', height:'300px', width:'300px' }); }); }); </script> </html> |
The above working example is also present on git.
0 comments:
Post a Comment