[作って学ぶ！jQuery] 第2回アニメーションを学ぶ

作って学ぶ！jQuery

minami

2010.04.23

イメージ

会社の近所にできた横浜ブルク13という映画館で見た「第9地区」が大変面白かったminamiです。夜遅くまでやっているし、きれいだし、スクリーンは大きいし、おススメの映画館です。

jQuery連載も3回目の第2回ということで、今回はアニメーションについてご紹介します。

表示と非表示の制御　show()とhide()

show()は要素が非表示の場合表示することができ、hide()はその逆で要素を非表示にします。

引数を”slow”,”fast”,”normal”,またはミリ秒で指定することで、アニメーションの速度を指定できます。何も指定しないと即座に表示が切り替わります。

また、スピードの次の引数にコールバック関数を設定できます。
コールバック関数とは処理が終わった後に実行される関数のことです。
アニメーション終了時に様々な処理を付け足すことができます。

$("div#test").show("slow",function() {
        $(this).text("アニメーション終了！");
});

※アニメーションが終わった後にテキストを差し替えます。

表示を交互に切り替える　toggle()

toggle()は表示と非表示を交互に切り替えることができます。

show(),hide()と同様にスピードとコールバック関数を引数に指定できます。

スライドで表示・非表示　slideDown()とslideUp()

slideDown(),slideUp()は要素の表示・非表示をスライドアニメーションで切り替えます。

slideToggle()は前出のtoggle()と同様に、要素が非表示の場合は表示に、表示されている場合は非表示にしてくれる便利なヤツです。

フェードインも楽々　fadeIn()とfadeOut()

要素の表示と非表示をを徐々に切り替えることができます。

fadeTo()は透明度を指定してフェードさせることができます。

独自に動きを設定できる　animate()

animate()は自分でアニメーションをカスタマイズして設定することができます。

CSSの値を指定すると、要素のCSSをその値まで徐々に変化させることができます。
ここで変化させられるのは数値で指定できるプロパティ（width,height,top,opacityなど）のみで、colorなどには対応していません。

CSSプロパティ、スピード、イージング、コールバック関数を指定できます。
※CSSの指定はキャメルケースで行います。

イージングは動きの性質を表したもので、初期状態では”liner”,”swing”が指定できます。
プラグインを入れることで多くのイージングが使えるようになります。
こちらのサイトでは32パターンのイージングのサンプルが掲載されています！

jQuery Easing - jQuery 日本語リファレンス

実は引数を連想配列で指定してやると、アニメーションのタイミングで関数を実行させるなど、もっとマニアックな設定ができます。

$("セレクタ").animate(
{ CSSプロパティ : hoge, ... },
{
        duration : //アニメーションのスピード,
        easing : //アニメーションの性質
        complete : function(){ //アニメーションが終わった時の処理 },
        step : function(s){ //アニメーションのフレーム毎に行われる処理 }
        queue : //falseだとただちにアニメーションが実行
})