jQuery :animated Selector

What Is :animated?

:animated (since jQuery 1.2) matches elements that are mid-animation right now — any node with a jQuery effects queue in progress. When the effect finishes, the element stops matching.

$(":animated")                 → every animating element
$("div:animated")              → animating divs only
$("#panel div").filter(":animated")  → faster pattern

$("#box").is(":animated")      → true / false for one element
/* CSS transitions / WAAPI → not matched */

How to Use :animated

Start a jQuery effect, then query which elements are still running at that moment.

1. Ensure a full jQuery build with the effects module (not a slim custom build).
2. Start an effect such as .slideToggle(), .fadeIn(), or .animate().
3. Select candidates with CSS first: $("div") or $("#panel .box").
4. Narrow with .filter(":animated") (or use $("div:animated") for small demos).

Pseudocode

candidates = find(cssSelector)   // e.g. all divs
matches = empty list

for each element in candidates:
    if element has active jQuery animation:
        add element to matches

return jQuery(matches)
// snapshot at call time — not a live subscription

Cheat Sheet

Keep these facts handy while working with mid-animation queries.

Live Preview

Start a looping slideToggle on #mover, then check which sample divs match :animated.

Click Start, then Check while #mover is sliding.

$("div:animated")
matched: 0
ids: (none)

jQuery Examples

Short, copy-ready snippets. Open a browser with jQuery loaded, or use Try It Yourself for a live editor.

$("#run").on("click", function () {
  var ids = $("div:animated").map(function () {
    return this.id || "(no id)";
  }).get().join(", ");
  console.log("animated:", ids || "(none)");
});

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

animated: mover
(static div is skipped; empty if clicked between cycles)

$("#mover").slideToggle("slow");

$("#check").on("click", function () {
  console.log("#mover animated?", $("#mover").is(":animated"));
  console.log("#static animated?", $("#static").is(":animated"));
});

#mover animated? true
#static animated? false
(while the slide is still running)

$("#box-a, #box-b").slideToggle("slow");

$("#run").on("click", function () {
  var n = $("#demo div").filter(":animated").length;
  console.log("animating in #demo:", n);
});

animating in #demo: 2
(while both slides are still running)

$("#mover").slideToggle(2000);

$("#stop").on("click", function () {
  $("#mover").stop(true, true);
  console.log("after stop:", $("div:animated").length);
});

after stop: 0

$("#a").fadeToggle(800);
$("#b").slideToggle(800);

$("#run").on("click", function () {
  console.log("animating:", $(":animated").length);
});

animating: 2
(while both effects are still running)

Performance Notes

Official docs: because :animated is not CSS, it cannot use querySelectorAll. Narrow with a pure CSS selector first, then filter.

Key Takeaways