If you want to use the jQuery Animation Effect, jQuery comes with animation() methods to use. You can create easy animation effects using this method.
jQuery Animation Effect Using animate()
You can animate the HTML element with CSS properties that contain only the numeric values like width, height, padding, margin, etc. However, you cannot perform the jQuery animation effect using CSS properties containing non-numeric values like color, background, etc. The string values show, hide and toggle can only work with the animate method.
The syntax of animate() method is given below.
Syntax of animate()
|
1 |
$(selector).animate({cssparameters},speed,callback) |
The syntax of animate() method contains four parameters selectors, cssparameter, speed, and callback. The selector and cssparamter are the required fields and the last two parameters speed and callback can be used optionally.
| Sr. No | Parameter Name | Description |
|---|---|---|
| 1 | selector | If you want to access HTML element and apply jQuery animation effect, you need to use this parameter. It is the required parameter. |
| 2 | cssparameter | The parameter ‘cssparameter’ contains the single or multiple CSS properties in commas with its values. For single value, use any CSS property like width:200px and for multiple CSS properties in comma separation like width:200px, height:50px, padding:20px etc. This is the required parameter. |
| 3 | speed | The speed controls the speed of animation performs with the HTML element. There are three possible values for speed ‘slow’, ‘fast’ and value in milliseconds. It is the optional parameter. |
| 4 | callback | The callback is the function you can specify to execute after the occurrence of the jQuery animation effect. |
Example of animate()
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $("#btn-animate").click(function(){ $("#para-animate").animate({margin:'50px'}); }); }); </script> <button id="btn-animate">Click me to animate</button> <div id="para-animate" style="width:100px;height:100px;background:#ccc;"></div> |
Output
jQuery Animation Effect to Animate With Multiple CSS Properties
If you want to perform the animation with more than one CSS properties, you can do so by using comma separated properties with its values.
Below is the simple example you can check and use in your project.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script> $(document).ready(function(){ $("#btn-animatemultiple").click(function(){ $("#para-animatemultiple").animate({ margin:'50px', width:'200px', height:'200px', opacity:0.6 }); }); }); </script> <button id="btn-animatemultiple">Click me to animate</button> <div id="para-animatemultiple" style="width:100px;height:100px;background:#ccc;"></div> |
Output
jQuery animate with Multiple Properties Using Queued Animation
If you want to perform the animation with multiple CSS properties performing animation one by one in the queue process, you can do so by using animate() many times with single CSS properties with each animate().
Below is the simple example you can check and use in your project.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> $(document).ready(function(){ $("#btn-animatequeue").click(function(){ $("#para-animatequeue") .animate({margin: "90px"}) .animate({width: "300px"}) .animate({height: "200px"}) .animate({padding: "30px"}) .animate({width: "200px"}) .animate({opacity: 0.6}); }); }); </script> <button id="btn-animatequeue">Click me to animate</button> <div id="para-animatequeue" style="width:100px;height:100px;background:#ccc;"></div> |
Output
jQuery Animation Effect to Animate With Relative CSS Property values
If you want to perform the animation with the relative values of the CSS properties, you can do so by using the += or -= operators before the values of the CSS properties.
Check the below given examples to see how to use relative values for animation.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script> $(document).ready(function(){ $("#btn-animaterelative").click(function(){ $("#para-animaterelative").animate({ margin:'50px', width:'+=200px', height:'+=200px', opacity:0.6 }); }); }); </script> <button id="btn-animaterelative">Click me to animate</button> <div id="para-animaterelative" style="width:100px;height:100px;background:#ccc;"></div> |
Output
You must also read.