第一篇文章是前几天写的。当时也不知道是不是发神经了。就模仿jquery的animate写了一个简单的动画实现方法。
后来发现还不错。不如继续写下去。这个版本基本上跟jquery的animate一样了。我是说效果基本上一样了。（效率还没测试过。）；
如果有专业测试人员 帮我测试下。
第一篇文章是前几天写的。当时也不知道是不是发神经了。就模仿jquery的animate写了一个简单的动画实现方法。
后来发现还不错。不如继续写下去。
这个版本基本上跟jquery的animate一样了。
我是说效果基本上一样了。（效率还没测试过。）；
如果有专业测试人员 帮我测试下。
演示
1：功能说明
兼容主流浏览器。
1：支持回调函数；
2：支持级联动画调用；
3：支持delay动画队列延迟；
4：支持stop停止动画；
5：支持opacity透明度变化；
6：支持+= -= *= /=操作；
7：支持单位操作(px, %);
2：使用说明
jelle(A).animate(B, C, D);
A:需要执行动画的dom元素ID；
B:动画的主要参数传递{key,val,key2,val2};比如{width:'100px',height:'+=100px',opacity:0.5},
opacity--透明度变化 支持+= -= *= /=操作。
C:动画执行用时，以毫秒为单位；[可选 默认500毫秒];
D:回调函数;[可选]
3:方法说明
1:animate()方法
jelle('cc').animate({width:'100px'},300,function(){alert('完成')});
// 是 cc 的宽度在300毫秒的时间变化到100px 动画结束 弹出 ‘完成’
2:stop()方法
jelle('cc').stop();
//停止正在 cc 对象上播放的动画。
3：delay（）方法
jelle('cc').delay(1000).animate({width:'100px'});
//cc 的宽度发生变化 将被延迟1秒执行。
我会一直把他完善下去。
var jelle=function(h){var a=document.getElementById(h),o=0,e={},l=10,k=function(b,c,g,d){return-g*(b/=d)*(b-2)+c},n=function(b,c){var g,d=/^([+-\\*\/]=)([-]?[\d.]+)/;if(d.test(b)){d=b.match(d);d[2]=parseFloat(d[2]);switch(d[1]){case "+=":g=d[2];break;case "-=":g=-d[2];break;case "*=":g=c*d[2]-c;break;case "/=":g=c/d[2]-c;break}return g}return parseFloat(b)-c};a.animate=a.animate||[];jelle[h]={};jelle[h].stop=true;e.entrance=function(b,c,g){setTimeout(function(){b(c[0],c[1],c[2])},g||0)};e.stop=function(){jelle[h].stop=
false;a.animate.length=0;document.getElementById(h).animate.length=0;return e};e.queue=function(){if(a.animate&&++o==a.animate[0].length){o=0;a.animate[0].callback&&a.animate[0].callback.apply(a);if(a.animate.length>1){a.animate[0].callback=a.animate[1].callback;a.animate=document.getElementById(h).animate||[];a.animate.shift();document.getElementById(h).animate=a.animate;for(var b=a.animate[0],c=0;c<b.length;c++)b[c][0]==="opacity"?e.entrance(e.alpha,[b[c][1],b[c][2]],l):e.entrance(e.execution,[b[c][0],
b[c][1],b[c][2]],l)}else{a.animate.length=0;document.getElementById(h).animate.length=0}}};e.delay=function(b){l=b;return e};e.execution=function(b,c,g){var d=(new Date).getTime(),f=g||500,j=parseFloat(a.style[b])||0,i=n(c,j),p=c.match(/\d+(.+)/)[1];(function(){var m=(new Date).getTime()-d;if(m>f){m=f;a.style[b]=parseInt(k(m,j,i,f))+p;e.queue();return e}a.style[b]=parseInt(k(m,j,i,f))+p;jelle[h].stop&&setTimeout(arguments.callee,10)})()};e.animate=function(b,c,g){var d=a.animate.length;a.animate[d]=
[];a.animate[d].callback=g;for(var f in b){a.animate[d].push([f,b[f],c]);if(d==0)f=="opacity"?e.entrance(e.alpha,[b[f],c],l):e.entrance(e.execution,[f,b[f],c],l)}document.getElementById(h).animate=a.animate;return e};e.alpha=function(b,c){var g=(new Date).getTime(),d=c||500,f,j;if(document.defaultView){f=document.defaultView.getComputedStyle(a,null).opacity||1;j=n(b,f)*100;(function(){var i=(new Date).getTime()-g;if(i>d){i=d;a.style.opacity=k(i,100*f,j,d)/100;e.queue();return e}a.style.opacity=k(i,
100*f,j,d)/100;jelle[h].stop&&setTimeout(arguments.callee,10)})()}else{f=a.currentStyle.filter?a.currentStyle.filter.match(/^alpha\(opacity=([\d\.]+)\)$/)[1]/100:1;j=n(b,f)*100;(function(){var i=(new Date).getTime()-g;if(i>d){i=d;a.style.filter="alpha(opacity="+k(i,100*f,j,d)+")";e.queue();return e}a.style.filter="alpha(opacity="+k(i,100*f,j,d)+")";jelle[h].stop&&setTimeout(arguments.callee,10)})()}};return e};