Skip to content
Related Articles

Related Articles

Improve Article

jQuery | animated Selector with Example

  • Last Updated : 13 Feb, 2019
Geek Week

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

Syntax:

$(:animated)

Return Value: This selector returns the element which is currently animated.

Below example illustrates the animated selector in jQuery:

Example:




<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:
Before clicking on the div element (Red color):

After clicking on the div element and color of the div will change:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it’s lowest price ever!




My Personal Notes arrow_drop_up
Recommended Articles
Page :