Velocity.js是一款动画切换的jQuery插件,它重新实现了jQuery的$.animate()方法从而加快动画切换的速度。Velocity.js只有7k的大小,它不仅包含了$.animate()的所有功能,并且还包含了颜色切换、转换(transform)、循环、缓动、CSS切换、Scroll功能,它是jQuery、 jQuery UICSS变换 在动画方面的最佳组合。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发布:更快的动画切换速度的更多相关文章

  1. JQuery动画插件Velocity.js发布:更快的动画切换速度

    5月3日,Julian在其GitHub上发布了Velocity.js.Velocity.js是一款动画切换的jQuery插件,它重新实现了jQuery的$.animate()方法从而加快动画切换的速度 ...

  2. Three.js 对模型多个动画切换展示(fbx)

    来源 :https://blog.csdn.net/qq_30100043/article/details/80087471 简介 上一节本想直接了结动画这一章.最后一想,没有做过模型动画切换的案例. ...

  3. Nvidia发布更快、功耗更低的新一代图形加速卡

    导读 不出意外的,Nvidia在其举行的Supercomputing 19大会上公布了很多新闻,这些我们将稍后提到.但被忽略的一条或许是其中最有趣的:一张更快.功耗更低的新一代图形加速卡. 多名与会者 ...

  4. 谷歌Chrome 27测试版已经发布 更快的浏览速度

    谷歌已经发布了Chrome 27测试版浏览器,为普通用户带来了大约提升为5%的网页浏览速度.用户已经可以在Chrome测试网页下载到最新的更新了.我们已经对这版更新做了一个全面的快速测试,让我们看看究 ...

  5. CSS 和 JS 动画哪个更快

    基于Javascript的动画暗中同CSS过渡效果一样,甚至更加快,这怎么可能呢?而Adobe和Google持续发布的富媒体移动网站的性能可媲美本地应用,这又怎么可能呢? 本文逐一遍览了基于Javas ...

  6. CSS3动画 相比JS Animation 哪个更快?

    CSS vs. JS Animation: 哪个更快? 基于JavaScript的动画竟然已经默默地比CSS的transition动画快了?而且,Adobe和 Google竟然一直在发布可以媲美原生应 ...

  7. CSS VS JS动画,哪个更快[译]

    英文原文:https://davidwalsh.name/css-js-animation 原作者Julian Shapiro是Velocity.js的作者,Velocity.js是一个高效易用的js ...

  8. CSS vs. JS Animation: 哪个更快

    CSS vs. JS Animation: 哪个更快? CSS vs. JS Animation: 哪个更快? 基于JavaScript的动画竟然已经默默地比CSS的transition动画快了?而且 ...

  9. 利用velocity.js将svg动起来

    关于velocity.js Velocity.js是一款jquery动画引擎插件,它拥有与jquery中的$.animate()相同的API,还打包了颜色动画,转换,循环,easing效果,类动画.滚 ...

随机推荐

  1. Html中value和name属性的作用

    1.按钮中用的value 指的是按钮上要显示的文本  比如“确定”“删除”等 2.复选框用的value 指的是这个复选框的值 3.单选框用的value 和复选框一样 4.下拉菜单用的value 是列表 ...

  2. c#中的表达式

    // 把变量和字面值(在使用运算符时,将它们统称为操作数)与运算符组合起来 // 就可以创建表达式,表达式是计算的基本构件 // 操作数可以是数值也可以是变量 + ; ; int num3 = num ...

  3. 《JavaScript 闯关记》之单体内置对象

    ECMA-262 对内置对象的定义是「由 JavaScript 实现提供的.不依赖于宿主环境的对象,这些对象在 JavaScript 程序执行之前就已经存在了」.意思就是说,开发人员不必显式地实例化内 ...

  4. JavaScript ----------------- 寄生式继承

    寄生式继承 寄生式继承是于原型式继承紧密相关的一种思路.寄生式基础的思路与寄生构造函数和工厂模式类似,既创建一个仅用于封装继承过程的函数,该函数内部以某种方式来增强对象,最后再像真地是它做了所有工作一 ...

  5. JavaScript自我学习之解析与执行

    如果想要学好JavaScript那么我们首先必须要知道浏览器JavaScript引擎是如何解释执行JavaScript代码的,作为一名菜鸟,从自己学习JavaScript的过程来说,真心觉得不了解这些 ...

  6. flex 调用WebService2(基于.net)

    flex 访问WebService的方法有很多种,使用FLEX4中的"数据/服务"功能可以自动生成访问WebService的代理类,这样可以避免把所有的数据访问都写到MXML页面上 ...

  7. PHP学习笔记三十八【下载】

    <?php //演示下载一个图片 $file_name="SunSet.jpg"; $file_name=iconv("utf-8","gb23 ...

  8. uva 10935 throwing cards away <queue>

    Given is an ordered deck of    n    cards numbered 1 to    n    with card 1 at the top and card    n ...

  9. 第一章 Qt入门

    1.1Qt 窗口部件 widget,用户界面的一个可视化元素,任意窗口部件都可以作为窗口.可以通过简单的HTML修改丰富样式 1.2建立连接 Qt的窗口部件通过发射信号(signal)来表明一个用户动 ...

  10. 【Lucene4.8教程之五】Luke

    一.Luke基本内容 1.Luke简介 Luke可用于查看Lucene创建的索引,并对其进行基本操作. 2.创建Luke (1)从Github上下载源文件 https://github.com/tar ...