jQuery :animated Selector

Quiz

The :animated selector in jQuery is used to select all elements that are currently being animated with jQuery's animation effects.

Syntax

Following is the syntax of jQuery :animated selector −

$(":animated")

Parameters

The :animated will select the elements that are currently animated.

Example

In the following example, we are using the :animated selector to apply styles to elements that are currently being animated −

<!DOCTYPE html>
<html>
<head>
    <title>jQuery :animated Selector Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script> 
        $(document).ready(function(){
            function animateDiv(){
                $("div:eq(0)").animate({height: "toggle"}, "slow");
                $("div:eq(0)").animate({height: "toggle"}, "slow", animateDiv);
            }
            animateDiv();
            
            $(".btn2").click(function(){
                $(":animated").css("border", "5px solid black");
            });
        });
    </script>
    <style>
        div {
            width: 100%;
            padding: 20px;
            margin-bottom: 10px;
            color: white;
            text-align: center;
            font-size: 1.2em;
        }
    </style>
</head>
<body>

<button class="btn2">Add border to the animated element</button>

<div style="background:purple;">Box 1</div>
<div style="background:orange;">Box 2</div>
<div style="background:teal;">Box 3</div>

</body>
</html>

When execute and click on the button, the :animate will select the animating element and add a black border around it.

jquery_ref_selectors.htm

Print Page