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包含两个输入参数,第一个参数用于规定产生的动画效果,第二个参数为可选参数,用于规定动画的额外选项。具体如下:
- $("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]):
,比如:
- $("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,读者可以参考学习
Velocity.js发布:更快的动画切换速度的更多相关文章
- JQuery动画插件Velocity.js发布:更快的动画切换速度
5月3日,Julian在其GitHub上发布了Velocity.js.Velocity.js是一款动画切换的jQuery插件,它重新实现了jQuery的$.animate()方法从而加快动画切换的速度 ...
- Three.js 对模型多个动画切换展示(fbx)
来源 :https://blog.csdn.net/qq_30100043/article/details/80087471 简介 上一节本想直接了结动画这一章.最后一想,没有做过模型动画切换的案例. ...
- Nvidia发布更快、功耗更低的新一代图形加速卡
导读 不出意外的,Nvidia在其举行的Supercomputing 19大会上公布了很多新闻,这些我们将稍后提到.但被忽略的一条或许是其中最有趣的:一张更快.功耗更低的新一代图形加速卡. 多名与会者 ...
- 谷歌Chrome 27测试版已经发布 更快的浏览速度
谷歌已经发布了Chrome 27测试版浏览器,为普通用户带来了大约提升为5%的网页浏览速度.用户已经可以在Chrome测试网页下载到最新的更新了.我们已经对这版更新做了一个全面的快速测试,让我们看看究 ...
- CSS 和 JS 动画哪个更快
基于Javascript的动画暗中同CSS过渡效果一样,甚至更加快,这怎么可能呢?而Adobe和Google持续发布的富媒体移动网站的性能可媲美本地应用,这又怎么可能呢? 本文逐一遍览了基于Javas ...
- CSS3动画 相比JS Animation 哪个更快?
CSS vs. JS Animation: 哪个更快? 基于JavaScript的动画竟然已经默默地比CSS的transition动画快了?而且,Adobe和 Google竟然一直在发布可以媲美原生应 ...
- CSS VS JS动画,哪个更快[译]
英文原文:https://davidwalsh.name/css-js-animation 原作者Julian Shapiro是Velocity.js的作者,Velocity.js是一个高效易用的js ...
- CSS vs. JS Animation: 哪个更快
CSS vs. JS Animation: 哪个更快? CSS vs. JS Animation: 哪个更快? 基于JavaScript的动画竟然已经默默地比CSS的transition动画快了?而且 ...
- 利用velocity.js将svg动起来
关于velocity.js Velocity.js是一款jquery动画引擎插件,它拥有与jquery中的$.animate()相同的API,还打包了颜色动画,转换,循环,easing效果,类动画.滚 ...
随机推荐
- 无心插柳OR志在必得?阿里推“来往”的意图
近年来,阿里巴巴在外围的动作确实不少,投资新浪微博.投资陌陌,配合阿里自身的一些战略调整,让人觉得这家公司似乎正在经历一场前所未有的“蜕变”.其实这也不难理解,在BAT三国演义中,任何一方都不 ...
- 几个检查当前运行的LINUX是在VM还是在实体机中的方法
昨天提到了VM中的逃逸问题,要想逃逸,首先要检测当前操作系统是否为VM,下面提供几个LINUX下的检查方法: 第一,首推facter virtual ,权限为普通用户,约定,普通用户命令提示符用$表示 ...
- BOOST 线程完全攻略 - 扩展 - 事务线程
扩展threadtimermoduleexceptionsocket 什么叫事务线程 举个例子: 我们写一个IM客户端的登录子线程,则该子线程会有这么几个事务要处理 No.1 TCP Socket物理 ...
- 多线程 AfxBeginThread 与 CreateThread 的区别
简言之: AfxBeginThread是MFC的全局函数,是对CreateThread的封装. CreateThread是Win32 API函数,前者最终要调到后者. 1>.具体说来,Cr ...
- HTML与CSS入门——第三章 理解HTML和XHTML的关系
知识点: 1.以HTML创建一个简单网页的方法 2.包含每个网页必须有的所有HTML标签的方法 3.用段落和换行组织页面的方法 4.用标题组织内容的方法 5.HTML.XML.XHTML和HTML5之 ...
- ORA-14450
ORA-14450 attempt to access a transactional temp table already in use Cause: An attempt was made to ...
- 最强烈推荐-我的java收藏夹(内有国内最好的java论坛)
原地址: http://bbs.chinaitlab.com/dispbbs.asp?boardid=148&id=34276 国内: www.chinajavaworld.com-论坛人很多 ...
- GSS2-Can you answer these queries II
---恢复内容开始--- 这道题真的是非常恶心,看题解看了半天才弄懂,而且题解上说的相当简略. 此题大意是询问去掉重复元素的最大子区间和,没有修改操作. 没有修改操作,这样就可以离线处理了. 这道题有 ...
- uva 1596 Bug Hunt
In this problem, we consider a simple programming language that has only declarations of one-dimensi ...
- (转)Should I use char** argv or char* argv[]
As you are just learning C, i recommend you to really try to understand the differences between ar ...