jQuery Custom Animations — Complete Guide to .animate() Method

In this tutorial, you will learn about jquery custom animations. We cover key concepts, practical examples, and best practices to help you master this topic.

jQuery custom animations with the .animate() method give you fine-grained control over CSS property transitions, enabling smooth, timed visual effects beyond basic show/hide and fade toggles.

What You'll Learn

• Using .animate() to transition CSS properties
• Controlling animation duration, easing, and callbacks
• Creating animation queues and chaining
• Stopping and managing active animations

Why It Matters

Built-in effects (fadeIn, slideUp) cover common cases, but real UIs need custom transitions — progress bars, sliding panels, color changes, and scroll animations. The .animate() method gives you full control.

Real-World Use

A dashboard widget that slides out a settings panel when hovered, animates a progress bar from 0% to 100%, and smoothly scrolls to newly loaded content — all with custom easing and timing.

Animation Flow

flowchart LR
    A[.animate(properties)] --> B[Duration]
    A --> C[Easing]
    A --> D[Complete Callback]
    B --> E[Queue]
    C --> E
    D --> E
    E --> F[Animate Step by Step]
    F --> G[Animation Complete]
    style A fill:#e6f3ff,stroke:#4a90d9,stroke-width:2px

Basic .animate() Usage

The .animate() method transitions CSS properties from their current values to specified target values:

// Animate width and opacity over 600ms
$('.box').animate({
  width: '300px',
  opacity: 0.5
}, 600);

// With duration and callback
$('.panel').animate({
  height: '200px',
  marginLeft: '50px'
}, 800, function() {
  console.log('Animation complete');
});

Expected output: The element's width increases to 300px and opacity drops to 0.5 over 600 milliseconds. The callback fires when the animation finishes.

Numeric Properties Only

The .animate() method only works on properties with numeric values. Common animatable properties include:

$('.element').animate({
  width: '50%',           // Percentage values
  height: 200,            // Pixel values (unitless = px)
  fontSize: '2em',        // Font sizes
  marginLeft: '+=50',     // Relative increase
  opacity: 0.25,          // Opacity (0 to 1)
  left: '100px',          // Position properties
  top: '-=20',            // Relative decrease
  padding: '20px'         // Padding
}, 500);

Expected output: Each property transitions smoothly from its current value to the target. Relative values (+=50) add to the current value.

Easing Functions

jQuery provides two easing options by default, and more via plugins:

// Linear easing (constant speed)
$('.box').animate({ left: '200px' }, 1000, 'linear');

// Swing easing (default - slow start/end, fast middle)
$('.box').animate({ left: '200px' }, 1000, 'swing');

// With callback
$('.box').animate({ left: '200px' }, {
  duration: 1000,
  easing: 'swing',
  complete: function() {
    $(this).css('background', 'green');
  }
});

Expected output: 'linear' moves at constant speed. 'swing' accelerates at the start and decelerates at the end. The callback fires after the animation completes.

Animation Queues

By default, animations run sequentially in a queue:

$('.box')
  .animate({ left: '100px' }, 400)    // Step 1: move right
  .animate({ top: '100px' }, 400)     // Step 2: move down
  .animate({ left: '0' }, 400)        // Step 3: move left
  .animate({ top: '0' }, 400);        // Step 4: move up

// The element traces a rectangle, one side at a time

Expected output: Each animation waits for the previous one to complete. The element moves right, then down, then left, then up in sequence.

Stopping and Managing Animations

// Stop the current animation (jumps to end)
$('.box').stop();

// Stop current and clear queue
$('.box').stop(true);

// Stop current, clear queue, jump to end state
$('.box').stop(true, true);

// Finish all animations immediately
$('.box').finish();

// Delay before next animation
$('.box')
  .animate({ left: '100px' }, 400)
  .delay(500)
  .animate({ top: '100px' }, 400);

Expected output: .stop() halts the running animation. .finish() jumps all queued animations to their final states. .delay() inserts a pause between queued animations.

Custom Easing with jQuery UI

// Include jQuery UI for additional easing functions
// <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

$('.box').animate({ left: '300px' }, {
  duration: 1000,
  easing: 'easeOutBounce',    // Bouncy effect
  complete: function() {
    console.log('Bounce complete');
  }
});

// Other available easings:
// easeInQuad, easeOutQuad, easeInOutQuad
// easeInCubic, easeOutCubic, easeInOutCubic
// easeInElastic, easeOutElastic

Animate with Step Callback

The step callback fires on every frame of the animation:

$('.progress-bar').animate({
  width: '100%'
}, {
  duration: 2000,
  step: function(now, fx) {
    // 'now' is the current animated value
    // 'fx' contains info about the animation
    $('.progress-text').text(Math.round(now) + '%');
  },
  complete: function() {
    $('.progress-text').text('Complete!');
  }
});

Expected output: The progress bar fills over 2 seconds while the percentage text updates on every animation step.

Color Animation

jQuery core does not animate colors. Use jQuery UI for color support:

// With jQuery UI included
$('.box').animate({
  backgroundColor: '#ff6b6b',
  color: '#fff'
}, 500);

// Alternative: use CSS transitions instead
$('.box').css('transition', 'all 0.5s ease');
$('.box').css({
  backgroundColor: '#ff6b6b',
  color: '#fff'
});

Common Mistakes

1. Animating non-numeric properties - Properties like display, background-color (without jQuery UI), and visibility cannot be animated with numeric interpolation.

2. Forgetting units - If you specify a string like '200', jQuery assumes pixels. For fontSize, use '2em' or 24. Unitless numbers default to px for most properties.

3. Queue buildup from rapid events - Hovering in and out repeatedly queues dozens of animations. Call .stop(true) before starting a new animation to clear the queue.

4. Animating to undefined values - If the starting CSS property is not set (e.g., no initial left), the animation may jump unexpectedly. Always set initial values in CSS.

5. Performance issues with many simultaneous animations - Animating 100+ elements simultaneously causes jank. Use requestAnimationFrame or CSS animations for large-scale effects.

Practice Questions

1. What CSS properties can the .animate() method transition?
2. How do you make animations run sequentially instead of simultaneously?
3. What does calling .stop(true, true) do?
4. How can you update a display value during an animation?
5. Why does .animate() not work for background-color by default?

Challenge: Build a card flipper that animates width to 0 (collapsing), swaps the content, then animates width back to original. Use queue management and callbacks.

FAQ

Mini Project

Build an animated onboarding tour with three steps. Each step slides in from the right, highlights a UI element with a pulsing border animation, and slides out to the left. Use queued animations and callbacks.

What's Next

Animations respond to events. Learn how jQuery event handling triggers your animations at the right moment.