jQueryの「animate」メソッドを使ったアニメーション

animateメソッドとは？
jQueryのanimateメソッドを使うと簡単にアニメーション(値を変化)させることが出来ます。
animateメソッドは値で指定出来る物（margin、color、width、positionなど）に対し有効です。

$('#box').animate({
    'left': '500px',
    'top': '300px'
});

メソッドチェーンを使い、順番に処理を行う

$('#box').animate({'left': '500px'}).animate({'top': '300px'});

速度を調節する

「slow」「normal」「fast」の文字列を指定するか、直接数値で指定します。

$('#box').animate({
    'left': '500px',
    'top': '300px'
},1000);

イージングの設定

イージングの設定をすれば「徐々に速くなる」などアニメーションに変化をつけることができます。
標準では「linear」と「swing」の２種類しかありません。「jQuery Easing Plugin」などを導入することでバリエーションが増えます。

$('#box').animate({
    'left': '500px',
    'top': '300px'
},1000, 'linear')

アニメーションの終了後に何かする

$('#box').animate({
     'left': '500px',
    'top': '300px'
},1000, 'linear', function(){
     alert('終わりました');
    });

このようにjQuery.animate() は大変便利ですが、CSS3の「transition」と「transform」を使うことで同じようなアニメーションがよりスムーズに動かす事が出来ます。「transform」の場合、GPUを使って処理される為、CPUを使って処理される「jQuery.animate()」よりCPUに負荷がかからなくなるので、レンダリングの高速化につながります。
ただ、GPUは処理するたびにメモリ（VRAM）を消費していきます。メモリは有限なので足りなくなると、CPUで処理しなくてはならない部分が増えてしまい、逆に処理が遅くなってしまうこともあ流ので注意が必要です。

Webサイトのパフォーマンス改善を行うためにGPU処理を取り入れてみた | un-Tech