jQuery :animated Selector

Last Updated : 11 Jul, 2025

The jQuery :animated Selector is an inbuilt selector which is used to select the element that is currently animated.

Syntax:

$(:animated)

Below examples illustrate the animated selector in jQuery:

Example 1: In this example, we will select the animated element by using jQuery animated Selector.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
  
    <!-- jQuery code to show the working of this method -->
    <script>
        $(document).ready(function () {
            function aniDiv() {
                $("#d3").animate({
                    height: "50%"
                }, "slow");
                $("#d3").animate({
                    height: "90%"
                }, "slow", aniDiv);
            }
            aniDiv();
            $("#d3").click(function () {
                $(":animated").css("background-color", 
                                   "green");
            });
        });
    </script>
    <style>
        #d1,
        #d2,
        #d3 {
            padding: 10px;
        }
      
        #d1 {
            width: 100px;
            float: right;
            background: lightblue;
            margin-right: 80px;
            margin-left: 120px;
        }
      
        #d2 {
            width: 100px;
            float: right;
            margin-right: 100px;
            background: yellow;
        }
      
        #d3 {
            width: 100px;
            background: red;
        }
    </style>
</head>
  
<body>
    <div>
        <!-- this div element will get selected -->
        <div id="d1">This is 3.</div>
        <div id="d2">This is 2.</div>
        <div id="d3">This is 1.</div>
    </div>
</body>
  
</html>

Output:

Example 2: In this example, we will add a border to the animated element.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>

    <!-- jQuery code to show the working of this method -->
    <script>
        $(document).ready(function () {
            function aniDiv() {
                $("#d2").animate({
                    height: "50%"
                }, "slow");
                $("#d2").animate({
                    height: "90%"
                }, "slow", aniDiv);
            }
            aniDiv();
            $("#d2").click(function () {
                $(":animated").css("border", 
                          "2px solid black");
            });
        });
        $(document).ready(function () {
            function aniDiv() {
                $("#d1").animate({
                    height: "50%"
                }, "slow");
                $("#d1").animate({
                    height: "90%"
                }, "slow", aniDiv);
            }
            aniDiv();
            $("#d1").click(function () {
                $(":animated").css("color", 
                                   "red");
            });
        });
    </script>
  
    <style>
        #d1,
        #d2 {
            padding: 10px;
        }
      
        #d1 {
            width: 100px;
            float: right;
            background: lightblue;
            margin-right: 80px;
            margin-left: 120px;
        }
      
        #d2 {
            width: 100px;
            background: lightgreen;
        }
    </style>
</head>
  
<body>
    <div>
        <!-- this div element will get selected -->
        <div id="d1">This is 3.</div>
        <div id="d2">This is 1.</div>
    </div>
</body>
  
</html>