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: