Skip to content
Related Articles

Related Articles

jQuery :animated Selector

Improve Article
Save Article
  • Last Updated : 17 Nov, 2022
Improve Article
Save Article

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=
    </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=
    </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>

Output:

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!