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

这篇文章。

  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