jQuery animate()

.animate() is jQuery's general-purpose animation engine. It interpolates any numeric CSS property from its current value to a target value over a specified duration, with configurable easing. This gives you full control over custom animations beyond the built-in show, hide, fade, and slide effects.

Syntax

.animate(properties, duration, easing, callback). The properties object accepts camelCased CSS property names and target values. Relative values using += and -= adjust from the current value rather than setting an absolute target.

Easing

jQuery ships with two easing functions: 'swing' (the default — ease in and out) and 'linear' (constant speed). The jQuery UI library and third-party plugins extend this with dozens of easing curves like easeOutBounce and easeInCubic.

Animatable: numeric CSS properties (width, height, opacity, left, top, font-size, margin…)
Non-animatable: color (requires jQuery UI or jQuery Color plugin), transform
Relative: { left: '+=50' } moves 50 px right from current position
Queue: multiple .animate() calls are queued automatically

Example

// Grow a box
$('#box').animate({
    width : '300px',
    height: '200px'
}, 600, 'swing', function () {
    console.log('Animation done!');
});

// Relative movement
$('#ball').animate({ left: '+=100' }, 400)
          .animate({ top : '+=50'  }, 400)
          .animate({ left: '-=100' }, 400)
          .animate({ top : '-=50'  }, 400);

// Animate font size and opacity together
$('#hero-title').animate({
    fontSize: '3rem',
    opacity :  1
}, 800);

// Stop current animation and jump to end
$('#slider').stop(true, true).animate({ left: 0 }, 300);

JAVASCRIPT

Full Editor

Pro Tip

Call .stop(true, true) before starting a new animation to prevent queued animations from stacking up on fast interactions.

Related Resources

jQuery Reference

Complete tag & property list

jQuery How-To Guides

Step-by-step practical guides

jQuery Exercises

Practice what you've learned