Jquery animations (jQuery + Animate + Demo)-jQuery -.

We can see.

Demo Address http://www.cnjquery.com/demo/jQuery+Animate+Demo/login.html

Download: http://bbs.cnjquery.com/viewthread.php?tid=39&pid=99&page=1&extra=page%3D1#pid99

The following are the referenced contents: ! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">&lt;HTMLxmlns="http://www.w3.org/1999/xhtml"&gt; &lt; Head&gt; &lt;Metahttp-equiv="Content-type"content="text/html; Charset=utf-8 "/&gt; &lt;title&gt;login&lt;/title&gt; &lt;Scripttype="Text/javascript"src="Jquerymini.js"&gt;&lt;/Script&gt; &lt;Scripttype="Text/javascript"&gt; $ (document). Ready (function () {//Control Registry animation $ (". Regfont"). Click (function () {//Click the Register button to close or open the Register box $ ("#regbox"). Slidetoggle ("slow");//if hidden on display, otherwise ... return false; }); Closes the Register box animation $ (. Delete). Click (function () {//Close the Register box $ ("#regbox"). Animate ({top: " -100px", Opacity: "Hide"},1000). Animate ({top: "0px"})//The animation moves up 100 pixels in 1 seconds and then moves to the initial position}); Controls the Login box animation $ (". Loginfont"). Click (function () {//Click on the login button to turn off or open the login box $ (". Loginbox"). Animate ({opacity: "Toggle", Left: " 50px "},1000). Animate ({left:" 10px "}," fast ");//If Hidden then display, move 50 pixels to the right return false; }); Small icon shaking animation $ ("#nav"). FIND ("img"). MouseOver (function () {$ (this). Animate ({left: -20}). Animate ({Left:2 0}). Animate ({left: -20}). Animate ({left:20}). Animate ({left: -20}). Animate ({left:20}) . Animate ({left:0}); }); Notice animation $ ("#notice"). Animate ({opacity: "Show"},000). Animate ({opacity: "0.1"},200). Animate ({opacity: "0.9"},200) . Animate ({opacity: "0.1"},200). Animate ({opacity: "0.9"},200). Slideup ("slow"). slidedOwn ("slow"); SetTimeout ("$ (' #siderbar '). Slideup (' slow '). Slidedown (' slow ')", 1000);//1 seconds later fold and expand layer Silderbar/Control right box animation SetTimeout ("$ (' #rightbox '). Show (' Slow ')", 2000;//2 seconds later displays the hidden layer Rightbox//control the DD display and hide//first basic effect $ ("#rightbox") in the right box. Find (' Dt:first '). Click (function () {$ (this). Next (). Toggle ("slow"); }); The second sliding effect $ ("#rightbox"). Find ("Dt:eq (1)"). Click (function () {$ (this). Next (). Slidetoggle ("slow"); }); The third fade out $ ("#rightbox"). Find ("Dt:eq (2)"). Click (function () {$ (this). Next (). Animate ({opacity: "Toggle"}, "slow")}); The fourth custom animation, where toggle (fn1,fn2) means: Switch the function to be called FN1,FN2 $ ("#rightbox") each time you click. Find ("Dt:last"). Toggle (function () {$ (this). Next (). Animate ({height: "100px"}, "slow"). Animate ({height: "toggle"}); $ ("img", this). attr ("src", "images/down.png")},function () {$ (this). Next (). Animate ({height: "toggle"}). Animate ({ Height: "80px"}, "slow"); $ ("img", this). attr ("src", "Images/up.png")}); Control the title bar up and DOWN arrow switch, do not know why and the last conflict occurred, presumably because all of the toggle switch function, resulting in the last error, Here the Dt:lt (3) was used therefore only on the first 3 DT, which was written again for the last one. $ ("#rightbox"). Find ("Dt:lt (3)"). Toggle (function () {$ (a). FIND ("img"). attr ("src", "images/down.png")},function ( ) {$ (this). FIND ("img"). attr ("src", "Images/up.png")}); }) &lt;/Script&gt; &lt;style&gt; * {margin:0 padding:0} ul {List-style:none} body{background: #000; font-size:12px;} #loginbar {Width:100%;height:3 0px;background-color: #930003; color: #FFFFFF; Filter:alpha (style=1,opacity=100,finishopacity=0); line-height:30px; text-indent:20px; border-bottom:1px solid #FFF; #loginbar a:link {color: #FFFFFF} #loginbar a:visited {color: #FFFFFF} #loginbar a:hover {color: #FFCC00} #leftbox {wid th:28%; height:600px; Float:left;} /*right box*/#rightbox {width:69% height:575px; background: #930003; border:1px solid #932C00; Margin-top:5px;filter: Alpha (startx=0, starty=100, finishx=0, finishy=0,style=1,opacity=0,finishopacity=100); Display:none; Float:left; Background: #571600; margin-left:5px; padding:5px} #regbox {width:90%; height:auto; color: #FFFFFF; font-weight:bold; background: #930003; border:1px solid FFF; Border-top:none; Margin-top:-3px;z-index:5; position:relative; Float:right; Padding:5px;display:none} * HTML #regbox {margin-top:-1px} #regbox input {width:80%} #regbox. Delete {position:absolute; bottom:12px;right:20px cursor:pointer} #regbox fieldset {padding:3px; Text-align: Center line-height:22px; width:90%; margin:0 Auto;} . mleft {margin-left:10px color: #FF9900}. fleft {float:left; Width:auto}. right{float:right; Width:auto}. fullwidth {W idth:100%}. loginbox {display:none; position:relative;} * html. loginbox {margin-top:3px;. submit {width:50px; Backgrou Nd: #930003; Color: #FFFFFF; Font-weight:bold; margin-top:3px;} * HTML. Submit {margin-top:0}/*nav*/#nav {width:auto; height:auto;position:relative; margin-top:3px;} #nav ul li {lis T-style:none; Display:inline; line-height:30px;} #nav ul li img {position:relative cursor:pointer;}/*notice*/#notice {width:90%; Height:80px;background: #930003; Borde r:1px solid #FFF; Position:relative;text-align:center; Color: #FFCC00; line-height:25px; Float:right; margin:5px 0 5px 0; padding:5px;} /*myinfo*/#siderbar {width:90% background: #930003; border:1px solid #FFF; height:477pxN:relative;filter:alpha (startx=0, starty=100, finishx=0, finishy=0,style=1,opacity=0,finishopacity=100); color:# FC0; Font-weight:bold; Float:right; line-height:22px; padding:5px;} . photo {float:left; margin-right:5px margin-bottom:10px;} photo img {width:144px; height:192px border:1px #FF99 00;} . Clear {Clear:both}. rtitle {background: #999900; border-left:10px solid #FF9900; width:99%; height:30px; line-height:30 px font-size:14px; Font-weight:bold; text-indent:10px;} . rcontent {width:96% border:1px solid #CCCCCC; height:auto; color: #FFFFFF; line-height:20px; padding:5px; margin:0 Auto ; margin-top:5px;margin-bottom:5px;} #rightbox DL {width:100% Height:auto} #rightbox dt{background: #999900; border-left:10px solid #FF9900; border-bottom : 1px solid #FF9900; width:99%; height:30px; line-height:30px; font-size:14px; Font-weight:bold; text-indent:10px; Cursor:pointer; position:relative} #rightbox dt img {position:absolute; right:10px top:10px;} #rightbox dd {width:96%; Border:1px solid #CCCCCC; Height:auto; Color: #FFFFFF; line-height:20px; padding:5px; margin:0 Auto; margin-top:5px;margin-bottom:5px; Background: #000000} &lt;/style&gt; &lt;/ Head&gt; &lt; Body&gt;<!--login Bar start-->&lt;DivID="Loginbar"&gt; &lt;Divclass="Fleft"&gt;&lt;aclass="Loginfont"href="Http://www.baidu.com"&gt; Login demo&lt;/a&gt;&lt;/Div&gt; &lt;Divclass="Fleft Loginbox"&gt; &lt;Divclass="Fleft"&gt; User name:&lt;inputtype="Text"/&gt; &lt;/Div&gt; &lt;Divclass="Fleft"&gt; Secret &amp;nbsp;&amp;nbsp;Code:&lt;inputtype="Password"/&gt;&lt;/Div&gt; &lt;Divclass="Fleft"&gt;&lt;inputtype="Submit"value="Submit"class="Submit"/&gt;&lt;/Div&gt; &lt;/Div&gt; &lt;Divclass="Fleft"&gt;&amp;nbsp;&amp;nbsp;&lt;aclass="Regfont"href="Http://www.baidu.com"&gt; Registration demo&lt;/a&gt;&lt;/Div&gt; &lt;Divclass="Fleft"&gt;&lt;spanclass="Mleft"&gt;demo: Faded &lt;/span&gt;&lt;/Div&gt; &lt;DivID="NAV"class="Fleft"&gt; &lt;ul&gt; &lt;Li&gt;&lt;imgsrc="Images/01.png"/&gt;&lt;/Li&gt; &lt;Li&gt;&lt;imgsrc="Images/02.png"/&gt;&lt;/Li&gt; &lt;Li&gt;&lt;imgsrc="Images/03.png"/&gt;&lt;/Li&gt; &lt;Li&gt;&lt;imgsrc="Images/04.png"/&gt;&lt;/Li&gt; &lt;Li&gt;&lt;imgsrc="Images/05.png"/&gt;&lt;/Li&gt; &lt;Li&gt;&lt;imgsrc="Images/06.png"/&gt;&lt;/Li&gt; &lt;Li&gt;&lt;imgsrc="Images/07.png"/&gt;&lt;/Li&gt; &lt;Li&gt;&lt;imgsrc="Images/08.png"/&gt;&lt;/Li&gt; &lt;/ul&gt; &lt;/Div&gt; &lt;/Div&gt; &lt;Divclass="Clear"&gt;&lt;/Div&gt; &lt;DivID="Leftbox"&gt; &lt;DivID="Regbox"&gt; &lt;formAction="" name="Form1"&gt; &lt;fieldset&gt; &lt;legend&gt; Registration Information &lt;/legend&gt; &lt;Tablewidth="100%"&gt; &lt;TR&gt;&lt;TDwidth="40%"&gt; User name: &lt;/TD&gt;&lt;TD&gt;&lt;inputtype="Text"/&gt;&lt;/TD&gt;&lt;/TR&gt; &lt;TR&gt;&lt;TD&gt; Secret &amp;nbsp;&amp;nbsp;Code: &lt;/TD&gt;&lt;TD&gt;&lt;inputtype="Password"/&gt;&lt;/TD&gt;&lt;/TR&gt; &lt;TR&gt;&lt;TD&gt; Hint question: &lt;/TD&gt;&lt;TD&gt;&lt;inputtype="Text"/&gt;&lt;/TD&gt;&lt;/TR&gt; &lt;TR&gt;&lt;TD&gt; Answer: &lt;/TD&gt;&lt;TD&gt;&lt;inputtype="Text"/&gt;&lt;/TD&gt;&lt;/TR&gt; &lt;TR&gt;&lt;TDcolspan="2"&gt;&lt;inputtype="Submit"value="Submit"class="Submit"/&gt;&lt;/TD&gt;&lt;/TR&gt;&lt;/Table&gt; &lt;/fieldset&gt; &lt;/form&gt; &lt;imgclass="Delete"src="Images/shut.gif"title="Off"/&gt; &lt;/Div&gt;<!--login Bar over-->&lt;DivID="notice"&gt; <h4 > this page for jquery animate demo </h4 > <h3 >demo: Fading </h3 > </div > <!--myinfo--> <div ID = "Siderbar" > <p > Hello, I am faded (ffeedd), OK, nonsense, this page demonstrates Jqeruy part of the animation animate effect, which seems to be cool, make our web page more likable, Not only that, but these seemingly cool effects are a piece of cake for jquery! Because I am too vegetable, so want to work hard with everybody study ah, right, because did not install IE7, so did not consider IE7 so do not know under IE7 what problem. </p </div > </div > <div ID = "Rightbox" > <dl > <dt > Basic Animation <img src = images/ Up.png " / ></ > <dd > <ul >< li >show () shows hidden matching elements </li > <li >hide () hides the displayed element </li <li >toggle () toggle the visible state of the element </li > <li > has two parameters (SPEED,FN) speed and callback function in parentheses, with a speed of fast,normal,slow three, and the FN function at the end of the animation Returns the function command </li > </ul > </dd > </dl > <dl > <dt > Sliding effect <img src = "images/up.png" / ></dt > <dd > <ul ><li >slidedown () dynamically displays all matching elements by changing the height (down) </li > ; li >slideup () dynamically displays all matching elements </li through a highly variable (decrease up) > <li >slidetoggle () Toggles the visibility of all matching elements by changing height (increasing or decreasing) </li > <li > This animation effect only adjusts the height of the elements, so that the matching elements can be hidden or displayed in a" sliding "manner. </li > </ul > </dd " </dl > <dl > <dt > Fade <img src = "images/up.png" / ></dt > <dd > <ul ><li >fadein The fading effect of all matching elements through changes in opacity--display </li > <li >fadeout The fading effect of all matching elements through changes in opacity-hide </ li > <li > Adjusts the opacity of all matching elements incrementally to the specified opacity </< Span class= "End-tag" >li <li >&NBSP; &NBSP; Example: $ ("P"). Fadeto ("Slow", 0.66), 600 milliseconds to slowly adjust the transparency of the paragraph to 0.66, about 2/3 of the visibility </li > << Span class= "Start-tag" >li > This effect does not provide a switching function, as if it could only be set opacity in a custom animate: "Toggle", the effect is the same </ li > </ul > </dd > </dl > <dl > <dt > Custom Animation <img src =< Span class= "Attribute-value" > "images/up.png" / ></dt <DD> <ul> <li> functions for creating Custom animations </li> < Li> This I explain not good, the core should be animate, specific please view api</li> <li>//control title bar up and DOWN arrow switch, Do not know why and the last conflict occurred, presumably because the toggle switching function, resulting in the last occurrence of errors, </li> <li>//here used dt: LT (3) is only applied to the first 3 DT, and it is written once for the last one. </li> </ul> </dd> </dl> </div> </body > </HTML>