Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
<Script src = "http://demo.jb51.net/jslib/jquery/jquery-1.7.1.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Function (){
$ ("# Panel" pai.css ("opacity", "0.1"); // sets transparency
$ ("# Panel"). click (function (){
$ (This ). animate ({left: "400px", height: "200px", opacity: "1"}, 3000) // move Px to the right within 3 seconds, and increase the height by PX, transparency changed to 1
. Animate ({top: "200px, width: 200px"}, 3000)
. FadeOut ("slow"); // hide it in fade-out mode
});
})
</Script>
</Head>
<Body>
<Div id = "panel" style = "position: relative; background-color: Olive; height: 100px; width: 100px; border: 1px; border-color: Aqua;">
</Div>
</Body>
</Html>