Select Currently Animating Elements in jQuery

Targeting elements that are actively running animations is a common requirement in interactive web development. This article explains how to select currently animating elements using jQuery's built-in :animated selector. You will learn the exact syntax, how to combine it with other selectors, how to check an element's animation status, and how to target elements that are not currently animating.

The :animated Selector

jQuery includes a custom pseudo-selector called :animated. It matches any element that is currently undergoing an animation driven by jQuery methods such as .animate(), .slideUp(), .fadeIn(), or similar effects.

To select every element on the page currently in motion:

$(':animated')

Filtering Specific Elements

You can combine :animated with element types, classes, or IDs to narrow down your selection.

Target only animating <div> elements:

$('div:animated')

Target only elements with a specific class that are animating:

$('.card:animated')

Apply a CSS change to active animations:

$('.box:animated').css('border', '2px solid red');

Checking If a Specific Element Is Animating

To determine whether a specific jQuery object is currently animating, use the .is() method with :animated. This returns a boolean true or false.

if ($('#myElement').is(':animated')) {
    console.log('The element is currently animating.');
} else {
    console.log('The element is idle.');
}

This check is useful for preventing animation stacking when a user repeatedly triggers an event like a button click:

$('#triggerBtn').on('click', function() {
    var $panel = $('#panel');

    // Only start a new animation if the element is idle
    if (!$panel.is(':animated')) {
        $panel.slideToggle();
    }
});

Selecting Non-Animating Elements

To select elements that are completely static, combine the :not() selector with :animated:

$('div:not(:animated)')

Alternatively, use the .not() filtering method:

$('div').not(':animated')

This approach allows you to queue or execute animations only on idle elements without interrupting active transitions.