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

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

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

    分享JQuery动画插件Velocity.js的六种列表加载特效.在这款实例中给中六种不同的列表加载效果.分别为从上飞入.从右侧飞入.从左侧飞入.和渐显.一起看下效果图: 在线预览   源码下载 实现 ...

  2. jQuery动画切换引擎插件Velocity.js

    Velocity.js 官网 Velocity.js实现弹出式相框 慕课网 极棒的jquery动画切换引擎插件Velocity.js jQ库 (function($){ // 普通调用 /*$('#d ...

  3. 基于jquery的插件turn.js学习笔记

    基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...

  4. Jquery放大镜插件---imgzoom.js(原创)

    Jquery放大镜插件imgzoom能够实现图片放大的功能,便于与原图进行比较. 使用方法: 1.引入jQuery与imgzoom,imgzoom.css <link rel="sty ...

  5. Velocity.js发布:更快的动画切换速度

    Velocity.js是一款动画切换的jQuery插件,它重新实现了jQuery的$.animate()方法从而加快动画切换的速度.Velocity.js只有7k的大小,它不仅包含了$.animate ...

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

    一.Velocity.js介绍 Velocity是一个jQuery插件,重新实现了$.animate() 来产生更高的性能(速度也比CSS动画库更快),而包括新的功能,以提高动画工作流程. Veloc ...

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

    案例实践: 第一页会以动画形式进入页面: 点击进入按钮时,第一页以动画消失,第二页以动画形式进入,同时四张图片也定义从小到大的动画形式: 第二页关闭按钮点击时,先是四张图片以缩小动画消失,然后第二页以 ...

  8. javascript动画:velocity.js学习

    第二章:基础知识 一.velocity和jQuery: Velocity函数是独立于jQuery的,但两者可以结合使用.通常这么做的好处是可以利用jQuery的链式操作:当你先用jQuery选择了一个 ...

  9. 一款很好用的页面滚动元素动画插件-AOS.JS

    aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果.在页面往回滚动时,元素会恢复到原来的状态. 加载方法 ...

随机推荐

  1. Android基于XMPP Smack openfire 开发的聊天室

    Android基于XMPP Smack openfire 开发的聊天室(一)[会议服务.聊天室列表.加入] http://blog.csdn.net/lnb333666/article/details ...

  2. <转>selenium+python+API分类总结

    分类 方法 方法描述 客户端操作 __init__(self, host, port, browserStartCommand, browserURL) 构造函数.host:selenium serv ...

  3. javascript面向对象实例

    非私有属性 function Student(name, gender, age, grade, teacher){ this.name = name; this.gender = gender; t ...

  4. 代码所见所得方式发布.xml

    pre{ line-height:1; color:#b836b3; background-color:#000000; font-size:16px;}.sysFunc{color:#19ef0b; ...

  5. CSS学习进度备忘

    书签:“CSS 高级”跳过:另外跳过的内容有待跟进 __________________ 学习资源:W3School. _________________ 跳过的内容:1.“CSS id 选择器”的“ ...

  6. BITED数学建模七日谈之三:怎样进行论文阅读

    前两天,我和大家谈了如何阅读教材和备战数模比赛应该积累的内容,本文进入到数学建模七日谈第三天:怎样进行论文阅读. 大家也许看过大量的数学模型的书籍,学过很多相关的课程,但是若没有真刀真枪地看过论文,进 ...

  7. 一排下去再上来的div

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  8. asp.net mvc 4 编译错误 CS0012

    CS0012: The type 'System.Data.Objects.DataClasses.EntityObject' is defined in an assembly that is no ...

  9. STL学习系列九:Map和multimap容器

    1.map/multimap的简介 map是标准的关联式容器,一个map是一个键值对序列,即(key,value)对.它提供基于key的快速检索能力. map中key值是唯一的.集合中的元素按一定的顺 ...

  10. SQLCONNECTION使用HTTP通信协议和中间件连接

    SQLCONNECTION支持TCP/IP和HTTP两种通信协议和中间件连接.一般地,默认情况下使用TCP/IP协议. HTTP 协议的一个非常重要的优势在于穿越防火墙. SQLCONNECTION使 ...