JQuery动画插件Velocity.js发布：更快的动画切换速度
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JQuery动画插件Velocity.js发布：更快的动画切换速度，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1252字，纯文字阅读大概需要2分钟。
内容图文
5月3日，Julian在其GitHub上发布了Velocity.js。Velocity.js是一款动画切换的jQuery插件，它重新实现了jQuery的$.animate()方法从而加快动画切换的速度。Velocity.js只有7k的大小，它不仅包含了$.animate()的所有功能，并且还包含了颜色切换、转换(transform)、循环、缓动、CSS切换、Scroll功能，它是jQuery、 jQuery UI、CSS变换 在动画方面的最佳组合。Velocity.js支持IE8+、Chrome、Firefox等浏览器，并支持Andriod以及IOS。Velocity.js在内部实现中使用了jQuery的$.queue()方法，因此它比 jQuery的$.animate()、$.fade()、$.delay()方法更加流畅，其性能也高于CSS的animation属性，具体原理读者可以参考这篇文章。
Velocity.js包含两个输入参数，第一个参数用于规定产生的动画效果，第二个参数为可选参数，用于规定动画的额外选项。具体如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
$(
"div"
).velocity({
property1: value1,
property2: value2
}, {
/* Default options */
duration: 400,
easing:
"swing"
,
queue:
""
,
complete:
null
,
loop:
false
,
delay:
false
,
display:
false
,
mobileHA:
true
});
|
Velocity.js同样支持jQuery的参数简写语法：$element.velocity(propertyMap [, duration] [, easing] [, complete]):,比如：
|
1
2
3
|
$(
"div"
).velocity({ left: 100 }, 1000);
$(
"div"
).velocity({ left: 100 }, 1000,
"swing"
);
$(
"div"
).velocity({ left: 100 },
"swing"
);
|
Velocity.js官方宣传Velocity的目标是成为DOM中动画切换方面的领导者。读者可以从这里下载最新版本的Velocity.js，由于Velocity.js的方法签名和$.animate()一样，因此只需将方法名从animate改为velocity即可。在其官方网站给出了几个绚丽的Demo，读者可以参考学习。
参考文档
内容总结
以上是互联网集市为您收集整理的JQuery动画插件Velocity.js发布：更快的动画切换速度全部内容，希望文章能够帮你解决JQuery动画插件Velocity.js发布：更快的动画切换速度所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。