【分享】模仿jquery的animate（自定义动画）
原创地址：idche 博客 http://www.cnblogs.com/idche/archive/2010/06/13/1758006.html
首先要说，他们没有jquery的animate那么强大。
jquery的自定义动画很强大，使得我们在网页里添加动画变得容易。
引入一个巨大的代码框架一直是我不太喜欢的，所以我写了一个简单的自定义动画。
1：实例演示
OK这个动画代码当然没有jquery的animate那么强大。看下面的测试。
他现在能完成的功能 比如 width height margin padding top lef 等等吧。
由于alpha（透明度） 需要的判断比较多，所以还没加进去。
看下面的3个测试，我分别使用了 这3个代码
jelle('cc').animate({width:'300px'},500,function(){this.style.backgroundColor='#333'});
jelle('cc').animate({height:'300px'},500,function(){this.style.backgroundColor='#000'});
jelle('cc').animate({width:'200px',height:'200px'},500,function(){this.style.backgroundColor=''});
2：使用说明
你可以看出他的用法基本上跟jquery一样。
jelle(id).animate({key:val},time,callback);
传递一个对象ID 然后设置对应的变化值,动画用时,回调函数。
3：源码解析
var jelle=function(id){
var elem=document.getElementById(id),//对象
f=j=0,callback,_this={},//j动画总数
tween=function(t,b,c,d){return -c*(t/=d)*(t-2) + b}
//算子你可以改变他来让你的动画不一样
_this.execution=function(key,val,t){
var s=(new Date()).getTime(),d=t || 500,
b=parseInt(elem.style[key]) || 0,
c=val-b;
(function(){
var t=(new Date()).getTime()-s;
if(t>d){
t=d;
elem.style[key]=tween(t,b,c,d)+'px';
//if(++f==j && callback){callback.apply(elem)}
++f==j&&callback&&callback.apply(elem);
//这句跟上面注释掉的一句是一个意思，我在google压缩的时候发现了这句
//感觉很不错。
return _this;
}
elem.style[key]=tween(t,b,c,d)+'px';
setTimeout(arguments.callee,10);
//arguments.callee 匿名函数递归调用
})();
//只能写一个这个了。
}
_this.animate=function(sty,t,fn){
//sty,t,fn 分别为 变化的参数key,val形式,动画用时,回调函数
callback=fn;
//多key 循环设置变化
for(var i in sty){
j++;//动画计数器用于判断是否所有动画都完成了。
_this.execution(i,parseInt(sty[i]),t);
}
}
return _this;
}
他其实很简单。呵呵。
4：源码
全部代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div style="position:relative; height:300px;">
<div style="width:200px; height:200px; border:1px solid #CCC; position:absolute; overflow:hidden;" id="cc"></div>
</div>
<script type="text/javascript">
var jelle=function(id){
var elem=document.getElementById(id),//对象
f=j=0,callback,_this={},//j动画总数
tween=function(t,b,c,d){return -c*(t/=d)*(t-2) + b}
//算子你可以改变他来让你的动画不一样
_this.execution=function(key,val,t){
var s=(new Date()).getTime(),d=t || 500,
b=parseInt(elem.style[key]) || 0,
c=val-b;
(function(){
var t=(new Date()).getTime()-s;
if(t>d){
t=d;
elem.style[key]=tween(t,b,c,d)+'px';
//if(++f==j && callback){callback.apply(elem)}
++f==j&&callback&&callback.apply(elem);
//这句跟上面注释掉的一句是一个意思，我在google压缩的时候发现了这句
//感觉很不错。
return _this;
}
elem.style[key]=tween(t,b,c,d)+'px';
setTimeout(arguments.callee,10);
//arguments.callee 匿名函数递归调用
})();
//只能写一个这个了。
}
_this.animate=function(sty,t,fn){
//sty,t,fn 分别为 变化的参数key,val形式,动画用时,回调函数
callback=fn;
//多key 循环设置变化
for(var i in sty){
j++;//动画计数器用于判断是否所有动画都完成了。
_this.execution(i,parseInt(sty[i]),t);
}
}
return _this;
}
</script>
<textarea id="test1" style="width:500px; height:100px;">
jelle('cc').animate({width:'300px',height:'250px'},500,function(){this.style.backgroundColor='#333'});
</textarea>
<input type="button" onclick="eval(document.getElementById('test1').value)" value="运行代码" />
<br/>
<textarea id="test2" style="width:500px; height:100px;">
jelle('cc').animate({height:'300px'},500,function(){this.style.backgroundColor='#000'});
</textarea>
<input type="button" onclick="eval(document.getElementById('test2').value)" value="运行代码" />
<br/>
<textarea id="test3" style="width:500px; height:100px;">
jelle('cc').animate({width:'200px',height:'200px'},500,function(){this.style.backgroundColor=''});
</textarea>
<input type="button" onclick="eval(document.getElementById('test3').value)" value="运行代码" />
</body>
</html>
下面是压缩以后的JS
压缩以后的JS
var jelle=function(o){var e=document.getElementById(o),p=j=0,h,c={};c.execution=function(b,i,k){var f=(new Date).getTime(),g=k||500,l=parseInt(e.style[b])||0,n=i-l;(function(){var a=(new Date).getTime()-f;if(a>g){a=g;var m=e.style,d=a;a=-n*(d/=g)*(d-2)+l;m[b]=a+"px";++p==j&&h&&h.apply(e);return c}m=e.style;d=a;a=-n*(d/=g)*(d-2)+l;m[b]=a+"px";setTimeout(arguments.callee,10)})()};c.animate=function(b,i,k){h=k;for(var f in b){j++;c.execution(f,parseInt(b[f]),i)}};return c};
根据自己的需要去改变他，既可以让你的页面使用少的JS代码，又可以加快自己的开发效率。我喜欢把一些小的功能封装起来。使用更加方便。
