JQuery动画插件Velocity.js发布:更快的动画切换速度
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,读者可以参考学习。
参考文档
- http://julian.com/research/velocity/
- http://davidwalsh.name/css-js-animation
- https://news.ycombinator.com/item?id=7663775
JQuery动画插件Velocity.js发布:更快的动画切换速度的更多相关文章
- 分享JQuery动画插件Velocity.js的六种列表加载特效
分享JQuery动画插件Velocity.js的六种列表加载特效.在这款实例中给中六种不同的列表加载效果.分别为从上飞入.从右侧飞入.从左侧飞入.和渐显.一起看下效果图: 在线预览 源码下载 实现 ...
- jQuery动画切换引擎插件Velocity.js
Velocity.js 官网 Velocity.js实现弹出式相框 慕课网 极棒的jquery动画切换引擎插件Velocity.js jQ库 (function($){ // 普通调用 /*$('#d ...
- 基于jquery的插件turn.js学习笔记
基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...
- Jquery放大镜插件---imgzoom.js(原创)
Jquery放大镜插件imgzoom能够实现图片放大的功能,便于与原图进行比较. 使用方法: 1.引入jQuery与imgzoom,imgzoom.css <link rel="sty ...
- Velocity.js发布:更快的动画切换速度
Velocity.js是一款动画切换的jQuery插件,它重新实现了jQuery的$.animate()方法从而加快动画切换的速度.Velocity.js只有7k的大小,它不仅包含了$.animate ...
- jquery动画切换引擎插件 Velocity.js 学习01
一.Velocity.js介绍 Velocity是一个jQuery插件,重新实现了$.animate() 来产生更高的性能(速度也比CSS动画库更快),而包括新的功能,以提高动画工作流程. Veloc ...
- jquery动画切换引擎插件 Velocity.js 学习02
案例实践: 第一页会以动画形式进入页面: 点击进入按钮时,第一页以动画消失,第二页以动画形式进入,同时四张图片也定义从小到大的动画形式: 第二页关闭按钮点击时,先是四张图片以缩小动画消失,然后第二页以 ...
- javascript动画:velocity.js学习
第二章:基础知识 一.velocity和jQuery: Velocity函数是独立于jQuery的,但两者可以结合使用.通常这么做的好处是可以利用jQuery的链式操作:当你先用jQuery选择了一个 ...
- 一款很好用的页面滚动元素动画插件-AOS.JS
aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果.在页面往回滚动时,元素会恢复到原来的状态. 加载方法 ...
随机推荐
- Android基于XMPP Smack openfire 开发的聊天室
Android基于XMPP Smack openfire 开发的聊天室(一)[会议服务.聊天室列表.加入] http://blog.csdn.net/lnb333666/article/details ...
- <转>selenium+python+API分类总结
分类 方法 方法描述 客户端操作 __init__(self, host, port, browserStartCommand, browserURL) 构造函数.host:selenium serv ...
- javascript面向对象实例
非私有属性 function Student(name, gender, age, grade, teacher){ this.name = name; this.gender = gender; t ...
- 代码所见所得方式发布.xml
pre{ line-height:1; color:#b836b3; background-color:#000000; font-size:16px;}.sysFunc{color:#19ef0b; ...
- CSS学习进度备忘
书签:“CSS 高级”跳过:另外跳过的内容有待跟进 __________________ 学习资源:W3School. _________________ 跳过的内容:1.“CSS id 选择器”的“ ...
- BITED数学建模七日谈之三:怎样进行论文阅读
前两天,我和大家谈了如何阅读教材和备战数模比赛应该积累的内容,本文进入到数学建模七日谈第三天:怎样进行论文阅读. 大家也许看过大量的数学模型的书籍,学过很多相关的课程,但是若没有真刀真枪地看过论文,进 ...
- 一排下去再上来的div
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- asp.net mvc 4 编译错误 CS0012
CS0012: The type 'System.Data.Objects.DataClasses.EntityObject' is defined in an assembly that is no ...
- STL学习系列九:Map和multimap容器
1.map/multimap的简介 map是标准的关联式容器,一个map是一个键值对序列,即(key,value)对.它提供基于key的快速检索能力. map中key值是唯一的.集合中的元素按一定的顺 ...
- SQLCONNECTION使用HTTP通信协议和中间件连接
SQLCONNECTION支持TCP/IP和HTTP两种通信协议和中间件连接.一般地,默认情况下使用TCP/IP协议. HTTP 协议的一个非常重要的优势在于穿越防火墙. SQLCONNECTION使 ...