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:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
