需要用到自己之前写的animate函数
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=GBK"></head><body><div onclick="do_fadeOut()" id="div" style="width:70px;height:50px;background:skyblue;left:25%;"><p>div</p></div><div id="div1" style="width:70px;height:50px;background:red;display:none;"><p>div1</p></div><button onclick="do_fadeOut()">fadeToggle Div</button><button onclick="do_fadeIn()">fadeToggle Div1</button><button onclick="do_fadeToggle()">fadeToggle Div</button><button onclick="do_fadeTo()">fadeTo Div</button></body><script>/*obj:dom对象prop:动画参数speed:执行速度 fast slow 3000等func:回调函数*/function animate(obj,prop,speed,func){//防止重复动画事件if(obj.timer) return ;//定义定时器执行次数和总执行时间varlimit=10,totalTime; if(typeof speed==='number'){//如果传入的是totalTime = speed;}else if(speed==='slow'){totalTime = 600;}else if(speed==='fast'){totalTime = 200;}else{totalTime = 400;}var time = totalTime/limit;//获取属性值function getStyle(obj, prop) {var prevComputedStyle = document.defaultView ? document.defaultView.getComputedStyle( obj, null ) : obj.currentStyle;return prevComputedStyle[prop];}var n=0,cache={},display,primary_cur;//cache用来缓存，省的每次都去dom获取obj.timer = setInterval(function(){n++;//执行次数每次递增for(var p in prop){if("display"===p) {display = prop["display"];if(display!=='none'){obj.style['display'] = display;}delete prop["display"];continue;}//判断是否是可以递增的属性，如果不是则直接让它生效，并从prop中删除，删除后就不用每次任务都执行它var reg = /^(\d)+(px$)?/;//数字和像素这样的判定为可以递增的属性if(!reg.test(prop[p])){obj.style[p] = prop[p];delete prop[p];continue;}var value,opacityFlag=(p == "opacity")?true:false;var cur = 0;if(cache[p+"_cur"]){//从缓存中取cur = cache[p+"_cur"];value = cache[p+"_value"];}else{value = prop[p];if(opacityFlag) {//如果本来是隐藏的则cur默认就是0if(getStyle(obj, 'display')!=='none'){cur = Math.round(parseFloat(getStyle(obj, p)) * 100);}} else {cur = parseInt(getStyle(obj, p));//处理100px的格式(typeof value==='string') && (value=value.replace(/px$/,""));}primary_cur=cur;cache[p+"_value"] = value;}var incre ;if(cache[p+'_increment']){//如果缓存中有则从中取incre = cache[p+'_increment'];}else{if(opacityFlag){incre = (value*100-cur)/limit;//计算每次变化值}else{incre = (value-cur)/limit;//计算每次变化值}cache[p+'_increment']= incre;}//缓存起来，这样就不用每次都去dom中获取了。cache[p+"_cur"] = cur + incre;if (opacityFlag) {//obj.style.filter = "alpha(opacity : '+(cur + incre)+' )";obj.style.opacity = (cur + incre)/100 ;}else {obj.style[p] = cur + incre + "px";}}//如果达到了最大执行次数，要清除定时器，并执行回调函数if(n==limit){if(display==='none'){obj.style['display'] = 'none';}//清除定时器clearInterval(obj.timer);obj.timer=undefined;func();}},time)}var div = document.getElementById("div");var div1 = document.getElementById("div1");/*function do_animate(){animate(div,{width:'400px',height:400,opacity: 0,background:'red'},2000,function(){console.log('finished')});}*//*obj:dom对象speed:执行速度 fast slow 3000等func:回调函数*/function fadeOut(obj,speed,func){animate(obj,{opacity: 0,display:'none'},speed,func);}function fadeIn(obj,speed,func){animate(obj,{opacity: 1,display:'block'},speed,func);}function fadeToggle(obj,speed,func){if(obj.style.display==='none'){fadeIn(obj,speed,func);}else{fadeOut(obj,speed,func);}} function fadeTo(obj,speed,opacity,func){if(opacity>0 && obj.style.display==='none'){animate(obj,{opacity: opacity,display:'block'},speed,func);}else{animate(obj,{opacity: opacity},speed,func);}}//执行隐藏function do_fadeOut(){fadeOut(div,1000,function(){console.log('fadeOut_finished')})}//执行显示function do_fadeIn(){fadeIn(div1,2000,function(){console.log('fadeIn_finished')})}function do_fadeToggle(){fadeToggle(div,1000,function(){console.log('fadeToggle_finished')})}function do_fadeTo(){fadeTo(div,"slow",0.15,function(){console.log('fadeTo_finished')});}</script></html>
