Learn to Run Custom jQuery Animations in Your Web Page

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:

• styles is 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 as slow or fast. If omitted, the default value is 400.
• easing - a keyword specifying whether the speed of the animation should consistent (linear value) or begin slow and speed up (swing value). If omitted, the default value is swing.
• 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: