Html
Copy Code code as follows:
<p><a href= "#" class= "Run" >Run</a></p>
<div id= "box" >
</div>
<p><a href= "#" class= "Run" >run</a></p><div id= "box" ></div>
Css
Copy Code code as follows:
<style type= "Text/css" >
Body {} {
margin:20px Auto;
padding:0;
width:580px;
font:80%/120% Arial, Helvetica, Sans-serif;
}
a {} {
Font-weight:bold;
Color: #000000;
}
#box {} {
Background: #6699FF;
height:100px;
width:100px;
position:relative;
}
</style>
<style type= "Text/css" >body {} {margin:20px auto; padding:0; width:580px; font:80%/120% Arial, Helvetica, sans-s Erif;} A {} {font-weight:bold; color: #000000;} #box {} {background: #6699FF; height:100px; width:100px; position:relative;} </style>
Javascript
Copy Code code as follows:
$ (document). Ready (function () {
$ (". Run"). Click (function () {
$ ("#box"). Animate ({opacity: "0.1", Left: "+=400"}, 1200)
. Animate ({opacity: "0.4", Top: "+=160", Height: "The", Width: "}", "slow")
. Animate ({opacity: "1", Left: "0", Height: "The", Width: "The"}, "slow")
. Animate ({top: "0"}, "fast")
. Slideup ()
. Slidedown ("slow")
return false;
});
});
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>chainable Transition effects</title> <script" type= "Text/javascript" Http://img.jb51.net/jslib/jquery/jquery.js "></script> <script type=" Text/javascript "> $ (document). Ready (function () {$ (. run). Click (function () {$ ("#box"). Animate ({opacity: "0.1", Left: "+=400"}, 1200) . Animate ({opacity: "0.4", Top: "+=160", Height: "M", Width: "}", "slow"). Animate ({opacity: "1", lef T: "0", Height: "The", Width: "The"}, "slow"). Animate ({top: 0}, fast). Slideup (). Slidedow N ("slow") return false; }); }); </script> <style type= "Text/css" > body {margin:20px auto; padding:0; width:580px; font:80%/120% Arial, Helvetica, Sans-serif; } a {font-weight:bold; Color: #000000; } #box {background: #6699FF; height:100px; width:100px; position:relative; } </style> </pead> <body> <p>Run</p> <div id= "box" > </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]