1、簡介
Velocity 是一個簡單易用、高性能、功能豐富的輕量級JS動畫庫。它能和 jQuery 完美協作，並和$.animate()有相同的 API， 但它不依賴 jQuery，可單獨使用。
2、兼容性
可兼容到 IE8 和 Android 2.3。
若需要兼容 IE8，就必須引入 jQuery 1.x
3、示例代碼(注意文件引用路徑)
（1）index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>velocity.js使用</title>
</head>
<body>
<div class="box" id="div1">
</div>
<div class="box" id="div2">
</div>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/velocity.min.js" type="text/javascript" charset="utf-8"></script>
<!--velocity.ui 在 velocity 之后加載-->
<script src="js/velocity.ui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
（2）style.css
.box{ width: 100px; height: 100px; background-color: pink;
}
(3)index.js
(function($) { // $('#div1').velocity({
// width: '300px'
// }, {
// //動畫時長
// duration: 3000,
// //動畫執行完后執行的回調
// complete: function() {
// $('#div2').velocity({
// width: '300px'
// }, {
// duration: 3000
// })
// }
// });
//動畫序列 // var seq = [{ // elements: $('#div1'), // properties: { // width: '300px' // }, // options: { // durations: 1000 // } // }, // { // elements: $('#div2'), // properties: { // width: '300px' // }, // options: { // durations: 1000 // } // } // ]; // $.Velocity.RunSequence(seq);
//預定義動畫
$('#div1').on('mouseover',function(){ $(this).velocity('callout.shake') }); })(jQuery);
4、使用
（1）參數配置：
$element.velocity({ properties: { opacity: 1 }, options: { duration: 500 } }); // 或者：
$element.velocity({ p: { opacity: 1 }, // 可以將 properties 簡寫成 p
o: { duration: 500 } });
基礎配置：
$element.velocity({ width: "500px", // 動畫屬性 寬度到 "500px" 的動畫
properties: value2 // 屬性示例
}, { /* Velocity 動畫配置項的默認值 */ duration: 400, // 動畫執行時間
easing: "swing", // 緩動效果
queue: "", // 隊列
begin: undefined, // 動畫開始時的回調函數
progress: undefined, // 動畫執行中的回調函數（該函數會隨着動畫執行被不斷觸發）
complete: undefined, // 動畫結束時的回調函數
display: undefined, // 動畫結束時設置元素的 css display 屬性
visibility: undefined, // 動畫結束時設置元素的 css visibility 屬性
loop: false, // 循環
delay: false, // 延遲
mobileHA: true // 移動端硬件加速（默認開啟）
});
（2）Complete屬性
complete為動畫結束時的回調函數，在無限循環模式下（設置loop: true） 該回調函數將不會執行，但是有規定次數的循環模式下（比如設置設置loop: 3） 該回調函數 將只會在最后一次循環結束后 執行一次。
（3）delay屬性
和 jQuery 的$.delay()方法一樣，動畫將會延遲所設定的毫秒后執行。
（4）支持SVG動畫
（5）velocity.ui.js
velocity.ui.js 是 velocity.js 的 動畫插件（1.8 KB ZIP’ed） 我們可以用它快速創建炫酷的動畫特效，它依賴於 velocity.js。
elocity.ui 有2個重要方法:$.Velocity.RegisterEffect()和 $.Velocity.RunSequence()
前者允許你將多個 Velocity 動畫合並存儲到一個自定義數組里，你可以通過引用該數組的名稱 在項目中復用， 后者能幫你改進嵌套的動畫序列 使得更易於管理。
Velocity.ui.js 內置了很多常用的動畫特效，分為 callout.* 和 transition.* 兩類。