Just think of how jquery is realized, helpless, brother ability is poor, not to study the jquery source. Well, make a very simple version of yourself, hehe! It seems to be OK, waiting for Brother's ability to go up again to optimize the next
<! 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> three-column layout </title> <style> #main1 {margin:20px auto; width:200px; Background-color: #6c9; Overflow:hidden; } </style> <script type= "Text/javascript" > var Animate = {obj:null, itime:0, Flag:1, MaxHeight: 0, _$: function (ID) {return "string" = typeof (ID)? document.getElementById (ID): ID; }, Slidedown:function () {if (parseint (this.obj.style.height) > this.maxheight) {this.flag = 0; return}; This.obj.style.height = parseint (this.obj.style.height) + 1 + ' px '; SetTimeout ("Animate.slidedown ()", this.itime); }, Slideup:function () {if (parseint (This.obj.style.height) < 1) {This.flag = 1; return}; This.obj.style.height = parseint (this.obj.style.height)-1 + ' px '; var repeat = "animate.slideup ()"; SetTimeout (Repeat,this.itime); }, Slide:function (objid,itime) {this.obj = this._$ (ObjID); This.itime = itime; if (this.flag) {this.maxheight = This.maxheight this.maxheight:p arseint (this.obj.style.height); This.obj.style.display = "block"; This.obj.style.height = "0px"; This.slidedown (); else {this.slideup (); }, Fadein:function (objid,itime) {this.obj = this._$ (ObjID); This.itime = itime; var that = this; This.maxheight =parseint (this.obj.style.height); var i = 100; var timer = setinterval (function () {That.obj.style.cssText = "Filter:alpha" (opacity= "+ i +");-moz-opacity: "+i*0.01+"; op Acity: "+i*0.01+"; Height: "+that.maxheight+" PX; i--; if (i = = 0) clearinterval (timer); },that.itime); }, Fadeout:function (objid,itime) {this.obj = this._$ (ObjID); This.itime = itime; var that = this; This.maxheight =parseint (this.obj.style.height); var i = 0; var timer = setinterval (function () {That.obj. Style.csstext = "Filter:alpha" (opacity= "+ i +");-moz-opacity: "+i*0.01+"; Opacity: "+i*0.01+"; Height: "+that.maxheight + "PX;"; i++; if (i ==100) clearinterval (timer); },that.itime); } </script> </pead> <body> <input type= "button" value= "Slide" onclick= "animate.slide (' main1 ', 1 0) "/> <input type=" button "value=" FadeIn "onclick=" Animate.fadein (' main1 ', ten) "/> <input type=" button "Val Ue= "fadeout" onclick= "animate.fadeout (' main1 ', ten)"/> <div id= "main1" > Slide && fadeIn && fade In && fadeout </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
After running, everyone looks at the effect.
