Contents
jQuery animation: Main Tips
- The jQuery
.animate()method runs a custom animation by modifying a set of CSS properties on the selected element. - There are two types of syntax you may use.
- Not all CSS properties can be animated using jQuery
.animate(). Check the list of animatable CSS properties.
Two Ways to Use .animate()
The jQuery .animate() runs a custom animation by changing CSS properties on an HTML element. These are altered by gradually increasing or decreasing their value throughout a period of time, which can also be modified.
There are two ways of using this method. You can either define four arguments, or use options argument for the properties of jQuery animations.
Specifying Values
The first way to run custom jQuery animations uses syntax like this:
$("selector").animate(styles, speed, easing, function);
The example below shows that only the styles are required to define:
The function takes four arguments:
stylesis entered in property-value pairs wrapped in curly brackets. The values must also be wrapped in quotes. Property names must be written in camel case.speed- a numeric value, specifying the number of milliseconds that the animation lasts before taking full effect. It can also be a keyword such assloworfast. If omitted, the default value is 400.easing- a keyword specifying whether the speed of the animation should consistent (linearvalue) or begin slow and speed up (swingvalue). If omitted, the default value isswing.function- a callback function to execute once the animation is completed.
Using Options
The second type of .animate() jQuery syntax you can use to run animations looks like this:
$("selector").animate(styles,options);
Two types of arguments are accepted. You enter styles, and then list the options. This argument comes in similar kind of pairs as styles, except that they are properties of the animation:
Options to Include
The syntax for the options argument is a lot like defining a JavaScript object property. Before each function, you need to write the name of the argument value and separate them with commas:
$("selector").animate({styles},{optionName1: value, optionName2: function(){/* code of the function */)});
There are multiple types of options you may use with .animate jQuery method. See them listed and explained here:
| Option | Description |
|---|---|
| duration | Animation duration in milliseconds, or a keyword value such as fast or slow. |
| easing | A keyword specifying whether the speed of the animation should be consistent (linear) or begin slow and speed up (swing). |
| queue | A boolean value placing the jQuery animation in the queue along with other effects if true and starting it immediately if false. |
| Since jQuery 1.7, this option can also be defined in a string that represents the name of the specific queue to place the jQuery animation in. | |
| specialEasing | An object containing values specified by the styles argument and their corresponding functions for easing. |
| step | A function to be called for every jQuery animation of every element animated using this method. |
| progress | A function to be called for every step of the animation. |
| complete | A function to be called once the animation finishes. |
| start | A function to be called once the animation starts. |
| done | A function to be called once the animation finishes (Promise object is completed). |
| fail | A function to be called in case the animation fails to finish. |
| always | A function to be called no matter whether the animation finishes or not. |