jQuery :animated Selector

Last Updated : 17 Nov, 2022

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>