はじめに
jQueryの機能を大きく分けると，DOM操作，アニメーション，イベント処理，Ajax，その他のユーティリティ関数といった分類ができます。DOM操作は前回の記事で解説したような，HTMLの要素を追加したり書き換えたりといった操作です。今回はその中の1つ，アニメーションについて解説します。アニメーションも正確にはDOM操作に分類されますが，アニメーションだけでかなり大きな比重を占めるので今回は通常のDOM操作とわけて考えます。イベント処理やAjax，ユーティリティ関数についても連載の後のほうで解説する予定です。
JavaScriptでアニメーションの基本
まず始めに，jQueryを使わないでアニメーションをする方法を紹介します。jQueryのアニメーションが実際に内部でどのような処理が行われているかを知ることでその後の理解度が増すと思います。JavaScriptでアニメーションは基本的にはCSSの値をミリ秒単位で変更することによって実現します。たとえば以下の例では，JavaScriptでCSSのtopの値を高速に変更することによりアニメーションを実現しています。
// topの初期値を設定
var top = 0;
// タイマー処理。1ms置きに実行
var timer = setInterval(function() {
// topの値を10増やす
top += 10;
// topの値を適用する
box.style.top = top + 'px';
// topの値が300以上になったらタイマーをクリアする
if (top > 300) {
clearInterval(timer);
}
}, 1);
ここではsetIntervalというJavaScriptのタイマー機能を使っています。このタイマー機能で1ミリ秒単位でtopの値を変更しています。実際には以下のように動きます。
これがJavaScriptでのアニメーションの基本になります。しかし実際には上記のような処理だと，ブラウザの処理が追いつかず期待した動作をしなかったり，複雑なアニメーションを記述するのがとても大変だったりします。jQueryの内部でも同じくタイマー機能を使った処理でアニメーションが行われていますが，それを意識せず直感的に書けるようになるのがjQueryのアニメーションの特徴です。
JavaScriptでのアニメーションに関して，詳しくは以下の記事に書いてあるので参考にしてみてください。
- これでできる！ クロスブラウザJavaScript入門 第17回 アニメーションの基礎
- http://gihyo.jp/dev/serial/01/crossbrowser-javascript/0017
jQueryのanimateを使ったアニメーションの基本
jQueryでアニメーションする場合はanimateという関数を使います。animteは以下のように記述します。
.animete(アニメーションする属性, アニメーションの速度, 変化量, 終了時の処理)
必須なのはアニメーションする属性だけで，後はオプションなので指定しなくても動作します。一番簡単な例では以下のようになります。
$('#box').animate({ top: 300 });
これだけで先ほどのものとほぼ同じような動きになります。
また，複数の属性を指定することも可能です。
$('#box').animte({
top: 300,
width: 300
});
こうすると以下のようにtopとwidthの値を同時に変更したアニメーションを実装することが可能です。
もしくは以下のように指定できます。
.animate(アニメーションする属性, オプション)
属性のところは同じですが，速度や変化量などは全てオプションのところで指定できます。またqueueやstepなどこの記述じゃないと指定できないものもあります。
