用Velocity.js快速创建动画

2014-11-18阅读(8174)评论(0)牵着狗狗看MM

苏州实时公交查询

概述

Velocity.js是一款动画切换的jQuery插件,它重新实现了jQuery的$.animate()方法从而加快动画切换的速度。
Velocity.js压缩后仅9KB,它不仅包含了$.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属性.

参数

[js]$element.velocity({
width: "500px",
property2: value2
}, {
/* Velocity’s 默认配置 */
duration: 400,
easing: "swing",
queue: "",
begin: undefined,
progress: undefined,
complete: undefined,
display: undefined,
visibility: undefined,
loop: false,
delay: false,
mobileHA: true
});

[/js]

默认选项值可以通过修改$.Velocity.defaults覆盖。

同时也支持对单个对象使用

[js]$element.velocity({
properties: { opacity: 1 },
options: { duration: 500 }
});
[/js]

Demos移步官网看下官网的
Velocity.js官网:http://julian.com/research/velocity/

赞(0) 打赏
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » 用Velocity.js快速创建动画
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏