jQuery Animate

The jQuery .animate() method is one of the most powerful tools in jQuery — it lets you create custom animations by changing CSS properties over time.

jQuery animate() Method

The .animate() method allows you to gradually change CSS properties (with numeric values) using animation.

Syntax:

$(selector).animate({ properties }, speed, easing, callback);

• properties: A map of CSS properties and values to animate
• speed (optional): "slow", "fast", or milliseconds (e.g., 1000)
• easing (optional): "swing" or "linear"

The following example demonstrates a simple use of the animate() method; it moves a <div> element to the right, until it has reached a style property of 50px:

jQuery animate() - Manipulate Multiple Properties

You can pass multiple properties inside the {} of .animate() to animate them at the same time.

jQuery animate() - Using Relative Values

You can use += or -= to change CSS values relative to their current value.

jQuery animate() - Using Pre-defined Values

jQuery provides some built-in keywords that simplify common animations:

• "show" – Reveals the element with animation
• "hide" – Hides the element with animation
• "toggle" – Toggles between show and hide states

__These keywords are especially useful with height, width, and opacity properties.

jQuery animate() - Uses Queue Functionality

By default, .animate() uses a queue system, meaning:

___Animations are placed in a queue and executed one at a time, in the order you call them.

This helps build step-by-step animations without needing setTimeout() or complicated logic.