The animate method

The animate method allows you to create animation effects for various CSS properties. The only required parameter is an object with CSS properties, similar to the one we pass to the css method. Many properties that have non-numeric values or multiple values cannot be animated by the basic jQuery functionality (for example, background-color). Also, shortened names of CSS properties are not always supported, for example font - instead, you should use fontSize or font-size. Values can be preceded by '+=' or '-=', in which case the value specified below will be added to or subtracted from the current value of the property. Also, instead of numeric values, you can put show, hide or toggle. All jQuery effects, including animate, can be disabled globally using the jQuery.fx.off setting. = true, which sets the duration value to 0.

Syntax

The first animation parameter is an object with CSS properties and their values in the format key:value that we are going to animate. The remaining parameters are considered optional. The second parameter defines the duration of the animation in milliseconds, 400ms by default. The third parameter is the smoothing function for the transition (by default it is swing), and the fourth is a callback function that will run after the animation is completed:

.animate(properties, [duration lasting durability continuance endurance value standing ], [smoothing function ], [callback-function office ]);

Time can be specified not only in milliseconds, but also using the keywords slow (600ms) and fast (200ms), the higher the value, the slower the animation. You can pass various options to the method as the second parameter, in the form of a JavaScript object containing pairs key: value:

.animate(properties, options);

For example, let's set the CSS properties width and height to toggle. Duration is 5000ms, we'll pass the easing functions as an object, for width it will be a linear function, and for height - easeOutBounce, also at the end of the animation we'll execute the function once (see the complete key), which will place a div with the inscription after the element with #test 'Animation complete.':

$('#test').animate({
	width: 'toggle',
	height: 'toggle'
}, {
	duration: 5000,
	specialEasing: {
		width: 'linear',
		height: 'easeOutBounce'
	},
	complete: function() {
		$(this).after('<div>Animation complete.</div>');
	}
});

The table below lists the properties and methods of the options object and their descriptions:

Name	Description
`duration`	Animation duration in milliseconds - string or number. `400ms` by default.
`easing`	Determines which easing function to use. `swing` by default.
`queue`	Boolean or string. `true` by default. Specifies whether to queue the animation. If `false` the animation will start immediately. If the parameter is passed as a string, the animation will be queued to the queue represented by this parameter. When using a queue with a custom name, the animation will not start automatically, to start it use `dequeue('queuename')`.
`specialEasing`	Here you can pass an object where the keys are CSS properties and the values are the corresponding easing functions.
`step`	A function that is called for each animated property of each animated element. It allows you to modify a `Tween` object to change the value of a property before it is set. It takes as parameters the current value of the `tween` and the `Tween` object.
`progress`	A function that is called after each animation step, only once per element, regardless of the number of animated properties. The function takes three parameters `animation` (as a promise), `progress` (a number from `0` to `1`) and `remainingMs` (the number of remaining milliseconds).
`complete`	A function called once after an element's animation has finished. The function accepts `animation` (as a promise).
`start`	A function that is called when an element's animation starts. The function accepts `animation` (as a promise) and `jumpedToEnd` (a Boolean value. If `true`, the animation automatically ends).
`done`	A function that is called when an element's animation ends (its promise is fulfilled successfully). The function takes `animation` (as a promise) and `jumpedToEnd` (a Boolean value. If `true`, the animation automatically ends).
`fail`	A function that is called when an element's animation fails (its promise is fulfilled with an error). The function takes `animation` (as a promise) and `jumpedToEnd` (a Boolean value. If `true`, the animation automatically ends).
`always`	A function that is called when an element's animation completes or stops without completing (its promise is fulfilled successfully or with an error). The function accepts `animation` (as a promise) and `jumpedToEnd` (a Boolean value. If `true`, the animation automatically completes).

Example

Let's move the green square to the left when we press the #left button, and to the right by 50px when we press the #right button, and also set the duration to 600ms - with the slow command:

<button id="left">left</button>
<button id="right">right</button>
<div class="block"></div>

div {
	position: absolute;
	background-color: green;
	left: 50px;
	width: 100px;
	height: 100px;
	margin: 5px;
}

$('#right').click(function() {
	$('.block').animate({'left': '+=50px'}, 'slow');
});
	
$('#left').click(function() {
	$('.block').animate({'left': '-=50px'}, 'slow');
});

The animate method

Syntax

Example

See also