$.animate()とVelocity.js区別

1、jQuery animate()方法

//         ，       ：
​
$("button").click(function(){
$("#box").animate({height:"300px"});
});

定義と使用法
animate()メソッドは、CSSプロパティセットのカスタムアニメーションを実行します.
この方法はCSSスタイルによって要素をある状態から別の状態に変更する.CSSアトリビュート値は徐々に変化し、アニメーション効果を作成できます.
アニメーションを作成できるのは数値値のみです(margin:30 pxなど).文字列値はアニメーションを作成できません(background-color:redなど).
注記:「+=」または「-=」を使用して相対アニメーション(relative animations)を作成します.

構文1

$(selector).animate({styles},speed,easing,callback)

2、Velocity.js

概要

Velocityはシンプルで使いやすく、高性能で機能豊富な軽量級JSアニメーションライブラリです.それはjQueryと完璧に協力することができて、そして同じで、しかしそれは依存しないで、単独で使用することができます.含まれているだけでなくanimate()のすべての機能は、カラーアニメーション、変換アニメーション(transforms)、ループ、スローモーション、SVGアニメーション、スクロールアニメーションなどの特色ある機能も備えています.
それは$よりanimate()は、より速く、よりスムーズで、CSS 3 animationよりもパフォーマンスが高く、jQueryとCSS 3 transitionの最適な組み合わせであり、すべての現代ブラウザをサポートし、最低でもIE 8とAndroid 2.3に互換性があります.

//   jQuery   Zepto  ，Velocity()      window     (window.velocity)
// (         js dom    )
Velocity(document.getElementById("dummy"), {
    opacity: 0.5
}, {
    duration: 1000
});
​
//    jQuery   Zepto  
$("#dummy").velocity({
    opacity: 0.5
}, {
    duration: 1000
});

2-1. パラメータの概要と基本的な書き方:

Velocityは、アニメーション効果の最終プロパティとしてcssプロパティのキー値ペア(css map)のセットを最初のパラメータとして受信します.2番目のパラメータは、オプションのパラメータがアニメーションの追加構成項目です.以下はパラメータの書き方です.
JavaScript

$element.velocity({
    width: "500px",        //          "500px"    
    property2: 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-2. 単一オブジェクトのパラメータ書き方:

Velocityはsingle-argumentの構文もサポートしています.次の例を参照してください.
JavaScript

$element.velocity({
    properties: { opacity: 1 },
    options: { duration: 500 }
});
​
//   ：
$element.velocity({
    p: { opacity: 1 }, //     properties     p
    o: { duration: 500 }
});

2-3. カンマ分割のパラメータの書き方($.animateのように):

JavaScript

$element.velocity({ top: 50 }, 1000);
$element.velocity({ top: 50 }, 1000, "swing");
$element.velocity({ top: 50 }, "swing");
$element.velocity({ top: 50 }, 1000, function() { alert("Hi"); });

2-4.Properties Mapアニメーションのプロパティ

属性値の単位を書かない場合、Velocityはピクセル(px)をデフォルトの単位とします.
JavaScript

//    padding: 1px
$element.velocity({ padding: 1 });
​
//    padding-left: 1px, padding-right: 1px
$element.velocity({
    paddingLeft: 1,
    paddingRight: 1
});
​
//        ！         padding      
$element.velocity({ padding: "1 1 1 1" }); // error

Velocityは1.2.0+バージョンで「px,em,rem,%,deg,vw/vh」という単位のサポートを追加しましたが、属性単位のデフォルト単位か「px」かを記入しない場合は、「deg」がrotateZ属性に使用される場合は省略して書くことができます.Velocityでは、「+,-,*,/」などの動的計算属性値もサポートされています.また、アニメーションの実行前に要素の初期値を設定することもできます.次の例を参照してください.(「rem」はIE 9+のみをサポートし、「vh/vw」はIE 9+とAndroid 4.4+のみをサポートします.)
JavaScript

$element.velocity({
    top: 50,                //     "50px"
    left: "50%",
    width: "+=5rem",        //           5rem
    height: "*=2"           //           2
    color: ["#888", "#000"] //        ，color       "#000"（ "#000"   "#888"）
});

2-5.Chainingチェーンアニメーション

1つの要素に複数のvelocity()を連続的に適用すると、アニメーションはキューで実行されます.
JavaScript$element

/*幅が75 pxになるアニメーション*/.velocity({width:75})/*など前の幅アニメーションが終了すると、高さが0になるアニメーション*/.velocity({ height: 0 });