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

 5月3日,Julian在其GitHub上发布了Velocity.js。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包含两个输入参数,第一个参数用于规定产生的动画效果,第二个参数为可选参数,用于规定动画的额外选项。具体如下:





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,读者可以参考学习。

 参考文档


  1. http://julian.com/research/velocity/

  2. http://davidwalsh.name/css-js-animation

  3. https://news.ycombinator.com/item?id=7663775

时间: 2024-08-07 08:19:16

JQuery动画插件Velocity.js发布:更快的动画切换速度的相关文章

分享JQuery动画插件Velocity.js的六种列表加载特效

分享JQuery动画插件Velocity.js的六种列表加载特效.在这款实例中给中六种不同的列表加载效果.分别为从上飞入.从右侧飞入.从左侧飞入.和渐显.一起看下效果图: 在线预览   源码下载 实现的代码. html代码: <h1> Velocity.js <i>slice + sequence</i></h1> <pre>Only anim X number with FX#1, animate Y number with FX#2 etc

jquery动画切换引擎插件 Velocity.js 学习01

一.Velocity.js介绍 Velocity是一个jQuery插件,重新实现了$.animate() 来产生更高的性能(速度也比CSS动画库更快),而包括新的功能,以提高动画工作流程. Velocity.js只有7k的大小,它不仅包含了$.animate()的所有功能,并且还包含了颜色切换.转换(transform).循环.缓动.CSS切换.Scroll功能,它是jQuery. jQuery UI.CSS变换在动画方面的最佳组合. Velocity.js支持IE8+.Chrome.Firef

jquery动画切换引擎插件 Velocity.js 学习02

案例实践: 第一页会以动画形式进入页面: 点击进入按钮时,第一页以动画消失,第二页以动画形式进入,同时四张图片也定义从小到大的动画形式: 第二页关闭按钮点击时,先是四张图片以缩小动画消失,然后第二页以动画形式消失,第一页以动画形式进入.   JS代码: (function(){ // 定义变量 var container = $('.container'); //主容器 var boxFront = $('.box-front'); //卡片正面 var mkLogo = $('.img-hea

javascript动画:velocity.js学习

第二章:基础知识 一.velocity和jQuery: Velocity函数是独立于jQuery的,但两者可以结合使用.通常这么做的好处是可以利用jQuery的链式操作:当你先用jQuery选择了一个元素后,就可以用这个元素去调用.velocity()为它添加动画效果.例如: //将一个变量分配给某个jQuery元素对象. var $div = $(“div”); //使用velocity设置该元素的动画 $div.velocity({ opacity : 0 }); //该句语法与jQuery

05.vue中js动画与Velocity.js的结合

vue中js动画 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue中js动画</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head>

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

导读 不出意外的,Nvidia在其举行的Supercomputing 19大会上公布了很多新闻,这些我们将稍后提到.但被忽略的一条或许是其中最有趣的:一张更快.功耗更低的新一代图形加速卡. 多名与会者与多个新闻站点发现了这点,Nvidia 向我证实这确实是一张新卡.Nvidia的“Volta” 这代 Tesla GPU 加速卡在 2017 年就已淘汰,因此升级工作应该早已过期. V100S 目前仅提供 PCI Express 3 接口,但有望最终支持 Nvidia 的 SXM2 接口.SXM 是

jquery——滚动条插件jscroll.js

一.效果如下 点击“测试中奖纪录”弹出弹框.弹框中内容超出时显示滚动条. 二.代码部分 1.html结构 <body> <a href="javascript:;" id="bbb">测试中奖纪录</a> <!--弹框6中奖纪录--> <div class="tcbox" id="reward_info" style="display:none">

velocity.js实现页面滚动切换效果

在线演示1 在线演示2 在线演示3 在线演示4 在线演示5 本地下载 原文链接:http://www.gbtags.com/gb/share/5650.htm 页面滚动切换效果 今天介绍一个Javascript的小型的动画插件velocity.js,可以方便高效的开发一个具有多页面滚动切换效果的网站. 浏览器支持 velocity.js支持IE8+.Chrome.Firefox等浏览器,并支持Andriod以及IOS. 我们开发一个工程,里面有一组相关联系的大型页面.不能做到在一张页面中把它们展

CSS 和 JS 动画哪个更快

基于Javascript的动画暗中同CSS过渡效果一样,甚至更加快,这怎么可能呢?而Adobe和Google持续发布的富媒体移动网站的性能可媲美本地应用,这又怎么可能呢? 本文逐一遍览了基于Javascript的DOM动画库,如Velocity.js和GSAP,看其是如何比jQuery和CSS动画效果更具性能的. jQuery 让我们先从基础的开始: JavaScript 和 jQuery 被错误的混为一谈了. JavaScript 动画是很快的. jQuery 把它放慢了下来.为什么?因为 —