jQuery :animated Selector

What You’ll Learn

The :animated selector finds elements that are mid-animation when your query runs — slide, fade, show/hide, or custom .animate() effects. This tutorial covers the official jQuery demo, performance tips with .filter(), timing pitfalls, and when :animated does not apply.

Introduction

Most jQuery selectors describe what an element is — a tag, class, or ID. The :animated pseudo-class describes what an element is doing right now: running a jQuery animation. Added in jQuery 1.2, it is one of several jQuery-specific extensions that do not exist in standard CSS.

Think of it as a snapshot. When you run $(":animated"), jQuery checks its internal animation registry and returns every element with an active effect. A moment later, when the animation completes, that same query may return nothing. This makes :animated perfect for debugging motion, highlighting moving panels, or guarding UI actions while transitions are in flight.

Understanding the :animated Selector

An element is animated in jQuery terms when a method from the effects module has started a transition and not yet reached its completion callback. That includes .slideToggle(), .fadeIn(), .hide("slow"), and .animate({ ... }).

Pure CSS transition or @keyframes animations do not register with jQuery — :animated will not find them. Likewise, a custom jQuery build stripped of the effects module cannot support this selector at all and will throw an error if you try.

📝 Syntax

Official jQuery API form (since 1.2):

jQuery( ":animated" )
// shorthand:
$( ":animated" )

// combine with element types:
$( "div:animated" )

Parameters

• :animated — no arguments; matches elements with a jQuery effect currently in progress.

Return value

• A jQuery object containing zero or more animating elements at query time.
• Empty collection when no animations are running.

Recommended performance pattern

• $( "#stage div" ).filter( ":animated" ) — CSS selector first, then jQuery filter.
• $( "div:animated" ) — shorthand tag + pseudo-class combo.
• $( ":animated" ).length — quick count of active animations.

Official jQuery API example

$( "#run" ).on( "click", function() {
  $( "div:animated" ).toggleClass( "colored" );
});

function animateIt() {
  $( "#mover" ).slideToggle( "slow", animateIt );
}
animateIt();

Examples Gallery

Example 1 follows the official jQuery API demo. Examples 2–5 cover looping animations, performance filtering, timing checks, and stopping all motion. Use the Try-it links to run each snippet in the browser.

$( "#run" ).on( "click", function() {
  $( "div:animated" ).toggleClass( "colored" );
});

function animateIt() {
  $( "#mover" ).slideToggle( "slow", animateIt );
}
animateIt();

#mover slides up/down continuously (yellow → green when Run clicked mid-slide)
Static divs unchanged — they are not :animated

function animateIt() {
  $( "#mover" ).slideToggle( "slow", function() {
    // Callback runs when slide FINISHES — no longer :animated here
    console.log( "Finished. Animated count:", $( ":animated" ).length );
    animateIt(); // start next toggle
  });
}

animateIt();

// During the slide (before callback): $( ":animated" ).length === 1

Mid-slide: Animated count: 1
After callback: Animated count: 0 (brief pause before next toggle)

// Prefer this on big pages:
$( "#stage" ).find( "div" ).filter( ":animated" ).addClass( "busy" );

// Instead of scanning the entire document:
// $( ":animated" ).addClass( "busy" );

Only animating divs inside #stage get class "busy"
Rest of the page is never scanned for animation state

$( "#box" ).fadeIn( 800 );

console.log( "Right after fadeIn call:", $( "#box" ).filter( ":animated" ).length );

$( "#box" ).promise().done( function() {
  console.log( "After fade completes:", $( "#box" ).filter( ":animated" ).length );
});

Right after fadeIn call: 1
After fade completes: 0

$( "#stop-all" ).on( "click", function() {
  $( ":animated" ).stop( true, true );
  $( "div" ).removeClass( "colored busy" );
});

// stop(clearQueue, jumpToEnd)
// true, true — clear queued effects and snap to final state

All sliding/fading elements freeze immediately
:animated count drops to 0 — no elements mid-effect

🚀 Common Use Cases

• Debug dashboards — highlight $(":animated") during QA to spot runaway loops.
• Disable buttons — block submits while $("#form").find(":animated").length is greater than zero.
• Carousel guards — ignore next/prev clicks when slides are mid-transition.
• Batch styling — add a busy class to animating cards for visual feedback.
• Cleanup on route change — $(":animated").stop(true, true) before SPA navigation.
• Teaching effects — official demo pattern for showing live animation state.

📝 Notes

• Available since jQuery 1.2 — a jQuery extension, not standard CSS.
• Requires the effects module — slim custom builds throw without it.
• Does not detect CSS transition or animation properties.
• Matches only at query time — asynchronous; re-query if you need updated state.
• Official performance tip: CSS selector first, then .filter(":animated").
• Works with chained effects — an element stays animated until its current step completes.

💡 Best Practices