Velocity.js(獨(dú)立于jQuery的凹嘲，但兩者可以結(jié)合使用[利用jQuery的鏈?zhǔn)讲僮鱙)
1.可以使用animate（）的語法，使用velocity設(shè)置改元素的動(dòng)畫构韵；
$div.velocity({opacity:0})
$element.velocity(properties,options)
注釋：第一個(gè)參數(shù)【對象】用于將css屬性映射到最終的期望值上(說明：如果提供的屬性包含字母周蹭，那么要將它們用半角引號括起來)
2.還有一種參數(shù)簡寫語法，不將選項(xiàng)對象作為第二個(gè)參數(shù)傳入疲恢，而是使用逗號分隔參數(shù)語法凶朗；需要列舉動(dòng)畫duration, easing,function(){}
$div.velocity({opacity:0},1000,’ease-in’,function(){alert(123})
3.值；
支持px,em,rem,%,deg,vw【默認(rèn)px】
4.鏈?zhǔn)讲僮?br>
當(dāng)一個(gè)元素鏈?zhǔn)秸{(diào)用多個(gè)velocity函數(shù)時(shí)冈闭，會(huì)自動(dòng)形成隊(duì)列（一個(gè)動(dòng)畫結(jié)束后一個(gè)動(dòng)畫接著執(zhí)行）
$element
.velocity({ width: "500px", height: "300px"})
.velocity({ opacity: 0 });
5.options;
Duration(持續(xù)時(shí)間)：以毫秒為單位指定duration值時(shí)，請?zhí)峁┮粋€(gè)不帶單位的整數(shù)值抖单。Slow【600ms】,normal【400ms】,fast【200ms】
Easing:ease-in-out,ease-in,ease-out
【貝塞爾曲線：參數(shù)格式是一個(gè)含有4個(gè)小數(shù)的數(shù)組】
$div.velocity({width:”300px”},[0.17, 0.67, 0.83, 0.67])
【彈簧物理：兩個(gè)值的數(shù)組【張力萎攒，摩擦力】：張力越大（默認(rèn)：500），整體速度和彈動(dòng)幅度就越大矛绘；摩擦力越兴Ｐ荨（默認(rèn)：20），彈簧結(jié)尾處的震動(dòng)速度就越快】
$div.velocity({width:”500px”},[250,15])
【spring:隨手可用的彈簧物理緩動(dòng)預(yù)設(shè)】
$div.velocity({width:”500px”},”spring”)
【begin(開始）和complete(完成)】
$div.velocity(
{opacity:0,width:”500px”},
{
begin:function(){
alert(“begin!”)
},
complete:function(){
alert(“complete!”)
}
}
)
【loop:動(dòng)畫就在調(diào)用的屬性映射匯總的值與調(diào)用之前元素的值之間交替幾次】
$div.velocity({height:"10em"},{loop : 2});
除了可以傳入整數(shù)以外货矮，還可以將true傳給loop羊精，這樣會(huì)無限觸發(fā)循環(huán)。
無限循環(huán)對于加載指示器大有幫助囚玫。（警燈）
$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(反轉(zhuǎn))
// 先將寬度變到100px
$element.velocity({ width: "100px" }, 400);
//在400ms內(nèi)回到原來的狀態(tài)
$element.velocity("reverse");
7.Scrolling(滾動(dòng))
// 滾動(dòng)之后窗口上邊緣將位于元素上邊緣之上100px的地方
$element.velocity("scroll", { duration: 1000, offset: "-100px" });
//滾動(dòng)之后窗口上邊緣將位于元素上邊緣之下100px的地方
$element.velocity("scroll", { duration: 1000, offset: "100px" });
8.transform(變換)【translation,rotate,scale】
translateX: 從左向右沿x軸移動(dòng)元素
translateY: 從上到下沿y軸移動(dòng)元素
rotateZ: 關(guān)于z軸旋轉(zhuǎn)元素
rotateX: 關(guān)于x軸旋轉(zhuǎn)元素（看起來由里向外）
rotateY: 關(guān)于y軸旋轉(zhuǎn)元素（由左到右）
scaleX: 成倍數(shù)改變元素寬度
scaleY: 成倍數(shù)改變元素高度
$element.velocity({
rotateZ: "90deg", // rotate clockwise 90 degrees
scaleX: 2.0 // double the width
});
9.定義動(dòng)畫序列喧锦；
var seq=[
{
elements:$(‘#div1’),
Properties:{width:’300px’},
options:{duration:1000}
},
{
elements:$(‘#div2’),
Properties:{width:’300px’},
options:{duration:1000}
}
]
$.Velocity.RunSequence(seq);
10.預(yù)定義動(dòng)畫和自定義動(dòng)畫：
①.預(yù)定義動(dòng)畫
$('#div1').on('mouseover',function(){
$(this).velocity('callout.shake');
});
還有很多預(yù)定義動(dòng)畫读规，這里我根據(jù)官網(wǎng)一一列舉一下：
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
②自定義動(dòng)畫：
官網(wǎng)推薦代碼：
$.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');
});
