jQuery :animated Selector Last Updated : 11 Jul, 2025 Suggest changes Share Like Article Like Report 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> Output: K kundankumarjha Follow Article Tags : JQuery jQuery-Selectors Explore jQuery Tutorial 7 min read Getting Started with jQuery 4 min read jQuery Introduction 7 min read jQuery Syntax 2 min read jQuery CDN 4 min read jQuery SelectorsJQuery Selectors 5 min read jQuery * Selector 1 min read jQuery #id Selector 1 min read jQuery .class Selector 1 min read jQuery EventsjQuery Events 4 min read jQuery bind() Method 2 min read jQuery blur() Method 1 min read jQuery change() Method 2 min read jQuery EffectsjQuery animate() Method 2 min read jQuery clearQueue() Method 2 min read jQuery delay() Method 2 min read jQuery HTML/CSSjQuery addClass() Method 2 min read jQuery after() Method 1 min read jQuery append() Method 2 min read jQuery TraversingjQuery | Traversing 4 min read jQuery add() method 1 min read jQuery addBack() Method 2 min read My Profile ${profileImgHtml} My Profile Edit Profile My Courses Join Community Transactions Logout Like