jQuery :animated Selector
Last Updated :
17 Nov, 2022
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 >
< 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 >
< 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 >
< 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 >
< div id = "d1" >This is 3.</ div >
< div id = "d2" >This is 1.</ div >
</ div >
</ body >
</ html >
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...