js模拟实现jQuery的animate动画效果

2014-8-5 12:03  0/5274  尔今     

模仿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秒执行。

以下为全部代码:

相关内容

您只需要填写验证码并提交评论即可
  • 近期热门
  • 为您推荐
  • 最新评论

返回顶部