jQuery | animated Selector with Example
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:
