The example in this article describes jquery: animated selector usage. Share to everyone for your reference. The specific analysis is as follows:
This selector matches all elements that are performing an animation effect.
You can use the animate () method to create a custom animation.
Syntax structure:
Copy Code code as follows:
This selector is typically used in conjunction with other selectors, such as the class selector and the element selector, and so on. For example:
Copy Code code as follows:
$ ("li:animated"). CSS ("Background-color", "Blue")
The above code sets the background color of the LI element under which the animation is being performed to blue.
If you do not use it with other selectors, the default state is to use with the * selector, for example $ (": Animated") equals $ ("*:animated").
Instance code:
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<meta name= "Author" content= "http://www.jb51.net/"/>
<title> Cloud-dwelling community </title>
<style type= "Text/css" >
li{
List-style-type:none;
width:150px;
height:30px;
}
. Run{background-color:green;}
. Static{background-color: #603;}
</style>
<script type= "Text/javascript" src= "Mytest/jquery/jquery-1.8.3.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
function Runit () {
$ (". Run"). Animate ({width: "250px"});
$ (". Run"). Animate ({width: "150px"},runit);
}
$ ("button"). Click (function () {
Runit ();
$ ("li:animated"). CSS ("Background-color", "Blue");
})
})
</script>
<body>
<ul>
<li class= "Run" ></li>
<li class= "Static" ></li>
</ul>
<button> Click to start animation </button>
</body>
You can set the background color of an animation element to blue.
I hope this article will help you with your jquery programming.
