新写了几个js的动画效果函数

很多时候我们只是需要对页面元素呈现简单的透明度、高宽、位置渐变的效果，没必要引入其他的几十k的框架，所以就自己写了个十分小巧的，只满足简单的效果，代码如下，喜欢的朋友可以自己完善下。

var fadeOpacityTime;
//ep:elem=domobject,type=1 or -1,time=50,to=true or 缺省该参数则不会应用往返循环的动画
function fadeOpacity(elem,type,time,to){
  var pos=0;
  fadeOpacityTime=setInterval(function(){
    setOpacity(elem,(type>0?pos:100-pos));
    pos+=5;
    if(pos==105){if(to){pos=0;type*=-1;}else clearFadeOpacity();}
  },time);
}
function clearFadeOpacity(){if(fadeOpacityTime){clearInterval(fadeOpacityTime);fadeOpacityTime=null;}}
function setOpacity(elem,level){
  if(elem.filters) elem.style.filter = 'alpha(opacity='+level+')';
  else elem.style.opacity=level/100;
}
var fadeSizeTime;
//ep:elem=domobject,type=1 or -1,toSize={width:100,height:200,top:{from:10,to:20},left:{from:10,to:20}} 可以省略不想对其应用动画的属性,time=50,to=true or 缺省该参数则不会应用往返循环的动画
function fadeSize(elem,type,toSize,time,to){
  var pos=0;
  fadeSizeTime=setInterval(function(){
    setSize(elem,{width:toSize.width,height:toSize.height,left:toSize.left,top:toSize.top,pos:(type>0?pos:100-pos)});
    pos+=5;
    if(pos==105){if(to){pos=0;type*=-1;}else clearFadeSize();}
  },time);
}
function clearFadeSize(){if(fadeSizeTime){clearInterval(fadeSizeTime);fadeSizeTime=null;}}
function setSize(elem,size){
  if(size.width) elem.style.width=size.width*size.pos/100+"px";
  if(size.height) elem.style.height=size.height*size.pos/100+"px";
  if(size.left) elem.style.left=size.left.from+(size.left.to-size.left.from)*size.pos/100+"px";
  if(size.top) elem.style.top=size.top.from+(size.top.to-size.top.from)*size.pos/100+"px";
}

 

页面上可以这样调用：

//元素'elem1'渐渐显示出来
　　fadeOpacity(document.getElementById('elem1'),1,10);

//元素'elem2'一闪一闪
　　fadeOpacity(document.getElementById('elem2'),1,10,true);

//元素'elem3'从距页面顶部10px移动到100px，同时宽度由0px渐变到500px
　　fadeSize(document.getElementById('elem3'),1,{top:{from:10,to:100},width:500},50);

 

其实简单修改一下源代码的话，还可以实现很多组合效果，呵呵！