I. Reasons for Demand
Currently, jQuery is a mature framework, and there are hundreds of plug-ins Based on it. In this example, I use jQuery to implement an animation effect manually.
II. Specific implementation
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // DTDHTML 4.01 Transitional //" http://www.w3.org/TR/html4/loose.dtd ">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> jQuery implements animation effects </title>
<Script language = "JavaScript" src = "../jQuery/jquery-1.7.1.min.js"> </script>
<Style type = "text/css">
# Test {
Position: relative;
Width: 100px;
Height: 100px;
Border: 1px solid #0050d0;
Background: #96e555;
Cursor: pointer;
}
</Style>
<Script type = "text/javascript">
$ (Function (){
$ ("# Test" pai.css ("optcity", "0.5"); // Set opacity
$ ("# Test"). click (function (){
$ (This). animate ({left: "400px", height: "200px", opacity: "1"}, 300)
. Animate ({top: "200px", width: "200px"}, 300)
. FadeOut ("slow ");
});
});
</Script>
</Head>
<Body>
<Div id = "test"> </div>
</Body>
</Html>
Iii. Running results