animate.js

animate.js
//患上到纵情一个元素的纵情一个属性的之后的值---之后属性的位置值functiongetStyle(element,attr){returnwindow.getComputedStyle?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr]||0;}//动画函数obj---要实施为画的货物json---要实施到的目的的参数货物fn为实施实现后的回调函数(能够再次挪用此方式依据上面格式传参--秩序实施多个动画)//挪用例：//zIndex:1000//透明度opacity:数字尺度----小数---放大100倍//my$("btn1").onclick=function(){//varjson1={"width":400,"height":500,"left":500,"top":80,"opacity":0.2};//animate(my$("dv"),json1,function(){//varjson2={"width":40,"height":50,"left":0,"top":0,"opacity":1,"zIndex":1000}//animate(my$("dv"),json2,function(){依据此格式频频重复削减动画将会秩序实施});//});//};functionanimate(element,json,fn){clearInterval(element.timeId);//收拾按时器//按时器,返回的是按时器的idelement.timeId=setInterval(function(){varflag=true;//默许,假如,部份抵达目的//遍历json货物中的每一个属性另有属性对于应的目的值for(varattrinjson){//分辨这个属性attr中能否opacityif(attr=="opacity"){//患上到元素的之后的透明度,之后的透明度放大100倍varcurrent=getStyle(element,attr)*100;//目的的透明度放大100倍vartarget=json[attr]*100;varstep=(target-current)/10;step=step＞0?Math.ceil(step):Math.floor(step);current+=step;//挪动后的值element.style[attr]=current/100;}elseif(attr=="zIndex"){//分辨这个属性attr中能否zIndex//层级窜改便是直接窜改这个属性的值element.style[attr]=json[attr];}else{//普通的属性//患上到元素这个属性的之后的值varcurrent=parseInt(getStyle(element,attr));//之后的属性对于应的目的值vartarget=json[attr];//挪动的步数varstep=(target-current)/10;step=step＞0?Math.ceil(step):Math.floor(step);current+=step;//挪动后的值element.style[attr]=current+"px";}//能否抵达目的if(current!=target){flag=false;}}i