Home > Developer > JavaScript
In jQuery: Example of animated selector usage, jqueryanimated
This document describes how to use the animated selector in jQuery. Share it with you for your reference. The specific analysis is as follows:
This selector matches all elements that are performing animation effects.
You can use the animate () method to create a custom animation.
Syntax structure:
Copy codeThe Code is as follows: $ (": animated ")
This selector should also be used with other selectors, such as class selector and element selector. For example:
Copy codeThe Code is as follows: $ ("li: animated" ).css ("background-color", "blue ")
The above Code sets the background color of the li element being animated to blue.
If it is not used with other selectors, the default state is to use with the * selector. For example, $ (": animated") is equivalent to $ ("*: animated ").
Instance code:
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Meta name = "author" content = "http://www.bkjia.com/"/>
<Title> helping customers </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>
</Head>
<Body>
<Ul>
<Li class = "run"> </li>
<Li class = "static"> </li>
</Ul>
<Button> click Start animation </button>
</Body>
</Html>
You can set the background color of the animation element to blue.
I hope this article will help you with jQuery programming.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
