简单动画函数：
优点：几百字节的代码即可实现缓冲动画效果，跨浏览器
缺点：一次只能应用于单个css属性(width/left/margin-Top)
ie6/ie7/ff/op下均ok,safari下未测试，应该也没问题。想实现多维度的动画(如width/height同时变化)，调用两次即可。
复制内容到剪贴板
代码:
function ani(obj,what,value,callback){ //长CSS属性必须写成"margin-Top"的形式
var tid;
var ctrVal = getStyle(obj,what)||0;
var stp = (value-ctrVal)/7;
var _what = what.replace(/-/,"");
if(Math.abs(stp)>=1){
obj.style[_what] = ctrVal + stp + "px";
tid = setTimeout(function(){
ani(obj,what,value,callback);
}
,40);
}
else{
if(Math.abs(stp)>0.2){
obj.style[_what]=ctrVal + (stp>0?1:-1) + "px";
tid=setTimeout(function(){
ani(obj,what,value,callback);
}
,40);
}
else{
obj.style[_what]=value+"px";
if((typeof callback).toLowerCase() =="function")
callback();
}
}
}拓展1:
提示：您可以先修改部分代码再运行
此例中，连点左键时会出现抖动现象，是因为多次执行结果作用与同一个元素上造成。为了保持函数短小，我未作此判断机制，使用时请自行做逻辑判断。
拓展2：
提示：您可以先修改部分代码再运行
复杂动画函数：
优点：调用一次即可实现多个“维度”的动画效果
复制内容到剪贴板
代码:
function animate(obj,params,speed,callback){
this.obj = (typeof obj).toLowerCase()=='object'?obj:$(obj);
this.rate = (typeof speed).toLowerCase() =="string"?({slow:1/7,normal:1/5,fast:1/3}[speed]):0;
this.isCB = ((typeof callback).toLowerCase() =="function");
var __self = this ,
flag=[0,0,0,0] , //用以确定动画时候完成
interval = 40 ,
timerID = null ;
this.start = function(){
this.loop();
}
this.loop = function(){
var k = -1;
for(var attr in params){
k++;
if(flag[k]==1)
continue; //如果完成，跳过该属性
var crtDis = getStyle(__self.obj,attr);
var togoDis = params[attr] - crtDis;
var step = togoDis*__self.rate;
if( Math.abs(step)>=1 ){
__self.obj.style[attr] = crtDis + step + "px";
}
else{
if(Math.abs(step)>__self.rate){ //即当togoDis<1/rate px时
__self.obj.style[attr] = crtDis + (togoDis>0?1:-1)+ "px";
}
else{
__self.obj.style[attr] = params[attr] + "px";
flag[k] = 1;
if(flag.toString().indexOf("0")==-1){
if(__self.isCB)
callback.call(__self.obj);
return false; // 终止程序
} //if
} //else
} //else
} //for
timerID = setTimeout(arguments.callee,interval);
} //loop
}拓展：
提示：您可以先修改部分代码再运行
此例在IE6/IE7/op下的效果较好，FF下不流畅，大概是由于程序效率和FF的js处理效率不高的原因。
[
本帖最后由 zcfg 于 2008-6-16 17:58 编辑 ]
