Html
CopyCode The Code is 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>
CSSCopy codeThe Code is 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-serif;} A {}{ font-weight: bold; color: #000000 ;}# box {}{ Background: # 6699ff; Height: 100px; width: 100px; position: relative ;}</style>
JavascriptCopy codeThe Code is as follows: $ (document). Ready (function (){
$ (". Run"). Click (function (){
$ ("# Box"). animate ({opacity: "0.1", left: "+ = 400"}, 1200)
. Animate ({opacity: "0.4", top: "+ = 160", height: "20", width: "20"}, "slow ")
. Animate ({opacity: "1", left: "0", height: "100", width: "100"}, "slow ")
. Animate ({top: "0"}, "fast ")
. Slideup ()
. Slidedown ("slow ")
Return false;
});
});
Xmlns = "http://www.w3.org/1999/xhtml">
Run