今回はjQuery入門シリーズの9回目でございます!
前回の記事はこちら(´。‐ω‐`)

【jQuery入門8】ウィンドウや要素の大きさを取得してみよう。

jQuery を使えば、ほんの少しの記述で簡単にアニメーションを実装できちゃいます!
そんな魔法みたいな機能が jQuery にはあらかじめ用意されているのですっ!
なんてステキ…(*´Д`)!!!

目次

要素を表示・非表示させるアニメーション

要素の透明度を操作して、表示・非表示させるアニメーション効果を与える関数です。

.fadeIn()

非表示な要素をフェードイン表示させます。

DEMO

  • duration … 再生時間 (数値 or 文字列) デフォルトは 400
  • complete … 再生終了後に実行する処理(関数)

その他、お好みでオプションを指定することができます!

オプション

.fadeOut()

表示している要素をフェードアウト表示させます。

DEMO

  • duration … 再生時間 (数値 or 文字列) デフォルトは 400
  • complete … 再生終了後に実行する処理(関数)

その他、お好みでオプションを指定することができます!

オプション

要素を開閉させるアニメーション

各要素の高さを操作して、上から下にスライドして降りて来るイメージの効果で表示させる関数です。

.slideDown()

要素を開いた状態にします。

DEMO

  • duration … 再生時間 (数値 or 文字列) デフォルトは 400
  • complete … 再生終了後に実行する処理(関数)

その他、お好みでオプションを指定することができます!

オプション

.slideUp()

要素を閉じた状態にします。

DEMO

  • duration … 再生時間 (数値 or 文字列) デフォルトは 400
  • complete … 再生終了後に実行する処理(関数)

その他、お好みでオプションを指定することができます!

オプション

要素に独自のアニメーションをつける

.animate()

CSS のプロパティを使って、独自のアニメーション効果を作成するための関数です。

DEMO

  • properties … CSS のプロパティ(オブジェクト)
  • duration … 再生時間 (数値 or 文字列) デフォルトは 400
  • easing … イージングの種類 (文字列) デフォルトは ‘swing’
  • complete … 再生終了後に実行する処理(関数)

ここで注意したいのが、プロパティ名はキャメルケースで表記されなければなりません。
例えば border-width は、borderWidth のように記述します。

例)

その他、お好みでオプションを指定することができます!

オプション

次回はいよいよ、jQuery入門シリーズの10回目(最終回)!
jQuery プラグインの簡単な設置方法をご紹介します!

第10回目はこちら。
【jQuery入門 10】プラグインを使ってみよう。

あわせて読みたい記事