Jquery.velocity动画

来源：互联网发布：机顶盒软件下载编辑：程序博客网时间：2024/05/29 03:25

1.引入相关插件

<!--首先引入Jquery插件--><script type="text/javascript" src='/source/JQuery/jquery-2.0.min.js'></script><script type="text/javascript" src='/source/Velocity/velocity.min.js'></script><script type="text/javascript" src='/source/Velocity/velocity.ui.min.js'></script>

2.函数基本用法

jQuery元素.velocity(CSS变更属性对象, 动画执行选项对象);$('.classname').css({    'color': '#ff3333',    'width': '500px',    'rotateZ': '60deg',    'translateX' : '100px'},{    'duration' : 1000,    'delay' : 500,    'ease' : 'linear'});

3.CSS常用属性解释

backgroundColor : '背景颜色';rotateX     : 'X轴翻转角度'(rotateY,rotateZ同理);translateX  : 'X轴位移度(20px)'(translateY同理);以‘-’连接的CSS原属性需改为驼峰命名

4.动画执行选项对象解释

duration    : '动画执行时间';delay   : '动画执行延迟时间';begin   : '动画执行开始回调函数';complete : '动画执行结束回调函数';loop    : '动画循环次数';display : '动画执行结束元素显示状态';visibility : '动画执行结束元素显隐状态';easing  : '动画执行速度函数':    linear : 匀速运动    ease-in: 匀加速运动    ease-out: 匀减速运动    自定义函数: [0,1.05,1,.07] ([函数生成地址](http://cubic-bezier.com "函数生成地址")

5.对象组动画执行（选择一组对象执行动画）

$.Velocity({e:对象组, p:CSS变更属性对象, o: 动画执行选项对象})var doms    = document.getElemetsByClassName('classname');$.Velocity({    e: doms,    p: {width: '200px', height: '100px', translateX: '50px', rotateZ: '180deg'},    o: {duration: 1000, easing: linear, delay: 5000}});

6.执行动画序列（按顺序执行一些列动画需要加载velocity.ui）

$.Velocity.RunSequence(序列对象);var aniQuence   = [    {e: $('.cname-a'), p: {translateX: '200px', color: '#FF3333'}, o: {duration: 1000}},    {e: $('.cname-b'), p: {translateX: '200px', color: '#33FF33'}, o: {duration: 1000}},    {e: $('.cname-c'), p: {translateX: '200px', color: '#3333FF'}, o: {druation: 1000}}];$.Velocity.RunSequence(aniQuence);

7.执行特定指令动画

jquery元素.velocity('特定指令', 动画执行选项对象);$('.classname').velocity('scroll', {duration: 400, offset : '-100px'});    scroll: 滚动至元素上方边缘    reverse: 还原至上一状态（回退）    slideUp: 上滑消失    slideDown: 下滑展示    fadeIn: 渐隐    fadeOut: 渐显

8.其他
在css变更属性对象中支持基本的加减乘除运算
例：{width: ‘+=500px’, height: ‘*=2’}

参考资料：参考资料1
参考资料：参考资料2

0 0