Velocity.js(独立于jQuery的，但两者可以结合使用[利用jQuery的链式操作])
1.可以使用animate（）的语法，使用velocity设置改元素的动画；

$div.velocity({opacity:0})
$element.velocity(properties,options)

注释：第一个参数【对象】用于将css属性映射到最终的期望值上(说明：如果提供的属性包含字母，那么要将它们用半角引号括起来)
2.还有一种参数简写语法，不将选项对象作为第二个参数传入，而是使用逗号分隔参数语法；需要列举动画duration, easing,function(){}

$div.velocity({opacity:0},1000,’ease-in’,function(){alert(123})

3.值；
支持px,em,rem,%,deg,vw【默认px】
4.链式操作
当一个元素链式调用多个velocity函数时，会自动形成队列（一个动画结束后一个动画接着执行）

$element
   .velocity({ width: "500px", height: "300px"})
   .velocity({ opacity: 0 });

5.options;
Duration(持续时间)：以毫秒为单位指定duration值时，请提供一个不带单位的整数值。Slow【600ms】,normal【400ms】,fast【200ms】
Easing:ease-in-out,ease-in,ease-out
【贝塞尔曲线：参数格式是一个含有4个小数的数组】

$div.velocity({width:”300px”},[0.17, 0.67, 0.83, 0.67])

【弹簧物理：两个值的数组【张力，摩擦力】：张力越大（默认：500），整体速度和弹动幅度就越大；摩擦力越小（默认：20），弹簧结尾处的震动速度就越快】

$div.velocity({width:”500px”},[250,15])

【spring:随手可用的弹簧物理缓动预设】

$div.velocity({width:”500px”},”spring”)

【begin(开始）和complete(完成)】

$div.velocity(
  {opacity:0,width:”500px”},
  {
      begin:function(){
        alert(“begin!”)
      },
    complete:function(){
      alert(“complete!”)
    }
 }
)

【loop:动画就在调用的属性映射汇总的值与调用之前元素的值之间交替几次】

$div.velocity({height:"10em"},{loop : 2});

除了可以传入整数以外，还可以将true传给loop，这样会无限触发循环。
无限循环对于加载指示器大有帮助。（警灯）

$div.velocity({ opacity:0},{loop:true});

【delay(延迟)】

$div.velocity({opacity:0},{delay:100});
$div.velocity({height:”+=100px”,width:”+=100px”},{loop:4,delay:1000})

【display,visibility】

$div.velocity({opacity:0},{display:”block”})

6.reverse(反转)

//  先将宽度变到100px
$element.velocity({ width: "100px" }, 400);

//在400ms内回到原来的状态
$element.velocity("reverse");

7.Scrolling(滚动)

// 滚动之后窗口上边缘将位于元素上边缘之上100px的地方
$element.velocity("scroll", { duration: 1000, offset: "-100px" });

//滚动之后窗口上边缘将位于元素上边缘之下100px的地方
$element.velocity("scroll", { duration: 1000, offset: "100px" });

8.transform(变换)【translation,rotate,scale】

translateX: 从左向右沿x轴移动元素
translateY: 从上到下沿y轴移动元素
rotateZ: 关于z轴旋转元素
rotateX: 关于x轴旋转元素（看起来由里向外）
rotateY: 关于y轴旋转元素（由左到右）
scaleX: 成倍数改变元素宽度
scaleY: 成倍数改变元素高度

$element.velocity({
    rotateZ: "90deg", // rotate clockwise 90 degrees
    scaleX: 2.0 // double the width
    });

9.定义动画序列；

var seq=[
  {
  elements:$(‘#div1’),
  Properties:{width:’300px’},
  options:{duration:1000}
  },
  {
  elements:$(‘#div2’),
  Properties:{width:’300px’},
  options:{duration:1000}
  }
]
$.Velocity.RunSequence(seq);

10.预定义动画和自定义动画：
①.预定义动画

　　　　$('#div1').on('mouseover',function(){
　　　　　　$(this).velocity('callout.shake');
　　　　});

还有很多预定义动画，这里我根据官网一一列举一下：
callout.bounce
callout.shake
callout.flash
callout.pulse
callout.swing
Callout.tada
transition.fadeIn
transition.fadeOut
transition.flipXIn
transition.flipXOut
transition.flipYIn
transition.flipYOut
transition.flipBounceXIn
transition.flipBounceXOut
transition.flipBounceYIn
transition.flipBounceYOut
transition.swoopIn
transition.swoopOut
transition.whirlIn
transition.whirlOut
transition.shrinkIn
transition.shrinkOut
transition.expandIn
transition.expandOut
transition.bounceIn
transition.bounceOut
transition.bounceUpIn
transition.bounceUpOut
transition.bounceDownIn
transition.bounceDownOut
transition.bounceLeftIn
transition.bounceLeftOut
transition.bounceRightIn
transition.bounceRightOut
transition.slideUpIn
transition.slideUpOut
transition.slideDownIn
transition.slideDownOut
transition.slideLeftIn
transition.slideLeftOut
transition.slideRightIn
transition.slideRightOut
transition.slideUpBigIn
transition.slideUpBigOut
transition.slideDownBigIn
transition.slideDownBigOut
transition.slideLeftBigIn
transition.slideLeftBigOut
transition.slideRightBigIn
transition.slideRightBigOut
transition.perspectiveUpIn
transition.perspectiveUpOut
transition.perspectiveDownIn
transition.perspectiveDownOut
transition.perspectiveLeftIn
transition.perspectiveLeftOut
transition.perspectiveRightIn
transition.perspectiveRightOut
②自定义动画：
　　　　官网推荐代码：

　　　　$.Velocity.RegisterEffect(name,{
　　　　　　defaultDuration : duration ,
　　　　　　calls : [
　　　　　　　　[ { property : value }, durationPercentage, {options} ],
　　　　　　　　[ { property : value }, durationPercentage, {options} ]
　　　　　　],
　　　　　　reset : { property : value, property : value }
　　　　});

下面是代码示例：

　　$.Velocity.RegisterEffect ( 'jiangbo.pulse', { 
　　　　defaultDuration : 300,
　　　　calls : [
　　　　　　[ { scaleX : 1.1 }, 0.5 ],
　　　　　　[ { scaleX : 1.0 }, 0.5 ]
　　　　]
　　} );
　　$('#div1').on('mouseover',function(){
　　　　$(this).velocity('jiangbo.pulse');
　　});