第7回 エフェクト編：連載：jQuery逆引きリファレンス（1/19 ページ）

jQueryの大きな特徴の1つは簡単なコードで実現可能なさまざまなアニメーションだ。アニメーション用メソッドをまとめた、すぐに役立つ18本を一挙公開。

[山田祥寛（http://www.wings.msn.to/），著]

印刷

通知 連載「％」の新着をメールで通知

髫穂ｹ晢ｽ�Post

Shareシェア

はてなブックマーク

SharePocket Button

　

連載目次

　このシリーズでは、jQueryの基本機能を逆引きリファレンスの形式でまとめています。リファレンスという性質上、本連載では入門レベルでの解説は割愛しています。jQueryの基本構文、Visual Studio上でjQueryを利用する方法などについては、拙稿「ASP.NETプログラマーのためのjQuery入門」を併せて参照することをお勧めします。

　さて、本連載も第7回となる今回は、エフェクト編です。特定の要素セットに対して、視覚的なアニメーション効果を適用するためのメソッドについて解説します。

• 非表示状態の要素を表示状態にするには？
  － show([speed [,fnc]]) －
• 表示状態の要素を非表示状態にするには？
  － hide([speed [,fnc]]) －
• 要素の表示／非表示を交互に切り替えるには？
  － toggle([speed [,fnc]]) －
• 要素の表示／非表示を特定の条件で切り替えるには？
  － toggle(switch) －
• スライドダウン効果を適用するには？
  － slideDown(speed [,fnc]) －
• スライドアップ効果を適用するには？
  － slideUp(speed [,fnc]) －
• スライドアップ／スライドダウンを交互に行うには？
  － slideToggle([speed [,fnc]]) －
• フェードイン効果を適用するには？
  － fadeIn(speed [,fnc]) －
• フェードアウト効果を適用するには？
  － fadeOut(speed [,fnc]) －
• 要素の透明度を徐々に変化させるには？
  － fadeTo(speed, opacity [,fnc]) －
• 独自のアニメーション効果を適用するには？
  － animate(params [,speed] [,easing] [,fnc]) －
• アニメーション効果を指定順に実行するには？
  － animate(params [,speed] [,easing] [,fnc]) －
• アニメーションの変化の程度を調整するには？
  － animate(params [,speed] [,easing] [,fnc]) －
• アニメーションにかかわるオプションをハッシュ形式で指定するには？
  － animate(params, options) －
• アニメーションの処理ステップごとに処理を実行するには？
  － animate(params, options) －
• アニメーションを順次／並行いずれで実行するかを決めるには？
  － animate(params, options) －
• アニメーションの変化量をスタイル・プロパティの単位に設定するには？
  － animate(params, options) ［1.4］ －
• スクリプト全体のアニメーション効果を無効化するには？
  － $.fx.off －

---

　以上、エフェクト編では、組み込みのアニメーションであるスライドダウン／スライドアップ、フェードアウト／フェードインなどに始まり、自分で独自のアニメーションを定義する方法についてまとめました。次回は、Ajax機能を実装するための機能について紹介の予定です。