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

No Photo

イメージ

会社の近所にできた横浜ブルク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パターンのイージングのサンプルが掲載されています!

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

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

まとめ

以上の効果サンプルを作ってみました。

.

jQueryのアニメーションに関係する部分をご紹介しました。
少々凝ってくるとanimate()でまかなってしまう感じではありますが、他の関数も使いどころによっては便利です!

photo
Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)
アスキー・メディアワークス 2010-02-12

by G-Tools , 2010/04/19

  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ