Quick Reach
jquery animate easing
As we seen in jquery animate() syntax, it used optional easing parameter. Easing Specifies transition with possible values of ‘swing’ and ‘linear’.
- Linear moves animation at a constant speed from start to end.
- Swing moves animation slower at the beginning and end while faster in middle.
Example of using easing
Experience this example online
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
| <!DOCTYPE html> <head> <title>jQuery Animate</title> <script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script> <script type=“text/javascript” language=“javascript”> $(document).ready(function() { $(“#animate_button”).click(function() { $(“.animate_spec”).animate({width: ‘500’},“slow”,“swing”); $(“.animate_spec”).animate({height:‘300’},“slow”,“linear”); }); }); </script> <style type=”text/css”> .animate_spec { background-color:#bbaa00; width:270px; height:150px; } </style> </head> <body> <button id=“animate_button”>Animate for height and width with easing</button></button> <div class=“animate_spec”>Example of animation for height and width with jquery animate() queue</div> </body> </html> |
You can use jqueryui’s library for more easing effects. This is library that can be included:
<script src=”//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js”></script>
Example of using jqueryui’s library
Experience this example online
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 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51
| <!DOCTYPE html> <head> <title>jQuery Animate</title> <script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script> <script src=“//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js”></script> <script type=“text/javascript” language=“javascript”> $(document).ready(function() { $(“#animate_button”).click(function() { $(“.animate_spec”).animate({width: ‘500’},“slow”,“easeOutBounce”); $(“.animate_spec”).animate({height:‘300’},“slow”,name); }); }); </script> <style type=”text/css”> .animate_spec { background-color:#bbaa00; width:270px; height:150px; } </style> </head> <body> <button id=“animate_button”>Animate for height and width with opacity</button></button> <div>Example of animation for height and width with jquery animate() queue</div> </body> </html> |
For complete reference go to http://jqueryui.com/effect/#easing
Leave A Comment?