• twitter
  • Facebook
  • はてなブックマーク
2012年05月15日(火)

[jQueryUI入門] アニメーション(エフェクター)機能

jQueryのアニメーション機能は単独でロードして使う事ができます。シンプルな書式でフェードやバウンド、スライドなどのインタラクティブコンテンツを作成する事ができます。また、アニメーションだけを使う場合は、スタイルシートテーマは不要です。

WordPressの場合、WordPressインストールディレクトリ » wp-includes » js » jquery » uiの中にjQueryUIエフェクトのminファイルが格納されています。

DEMO
jQueryUIのアニメーションEffect機能
Effects CorejQueryEffectのエフェクトクラスのベースとなる定義が記述されています。必須です。
上下左右に降りてくるような表示・非表示の切り替えを行います。
エフェクトを発生させると、指定した要素が上下にバウンドしたような動きをします。
中央へ向かってカーテンやブラインドを開閉するようなエフェクトを行います。
Dropのフェードしながら画面の外へスライドして表示・非表示させるエフェクトを行います。
画像やブロック要素にスライスをかけて(9分割)、それぞれのスライスが外側(内側)に向かって消滅(収縮)するようなエフェクトを行います。
不透明度を変化させながら、表示・非表示を行います。
2段階のタイミングで上→左のような順で表示・非表示を行います。
カラーエフェクトを加えてハイライトしたり、点滅させたりして強調表示するエフェクトを行います。
Puff外側に向かって拡大させながら広がっていくエフェクトを行います。
要素を点滅させるエフェクトを行います。
指定した拡大率に向かって要素のサイズを変化させるエフェクトを行います。
Size指定させたサイズへボックスの高さと幅を変化させるエフェクトを行います。
横方向にグラグラ揺らすエフェクトを行います。
Dropのフェードなし版。画面の外からスライドして表示・非表示させるエフェクトを行います。
Transferボックスの形を元にゴーストのような枠を対象のボックスに向かって転移(残像処理)させるようなエフェクトを行います。

使い方

jQueryUIEffectのコアファイルと、使いたい種類のエフェクトファイルをscriptタグで読み込みます。読み込んだエフェクトは、jQuery拡張のeffectを呼び出す際に第一パラメータで指定します。第二パラメータはエフェクトの設定です。各エフェクトファイル中に指定可能なオプションの値が記述されています。
  1. <script src="jquery.effects.core.js"><script>
  2. <script src="jquery.effects.fade.js"><script>
  3. <script>
  4. $('#foo').click(function(){
  5. $('#bar').effect('エフェクトの種類', {パラメータ});
  6. });
  7. </script>

WordPressでのロード

事前に登録されたjavascriptスクリプトを、ハンドル名を指定してロードする方法です。jQueryEffect系のファイルは$wp_scriptsに事前登録されているため、functions.phpに次のように記述するだけで読み込み出来ます。また、必須ファイルをグループ化してあるため、jQueryなども個別にロードする記述を行わなくても、自動でロードしてくれます。
  1. <?php
  2. function load_jquery_effect(){
  3. if(is_admin()) return;
  4. // shakeエフェクトを使う場合
  5. wp_print_scripts('jquery-effects-shake');
  6. }
  7. add_action('wp_head', 'load_jquery_effect');
  8. ?>

関連投稿記事

Comment: