【分享】模仿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代码，又可以加快自己的开发效率。我喜欢把一些小的功能封装起来。使用更加方便。