jQuery UI逆引きリファレンス
jQuery UIの拡張されたエフェクトを利用するには？（show／hide／toggle／effect編）
jQuery標準の各種エフェクト機能を拡張して、よりリッチな効果をシンプルなコードで実現できる、jQuery UIのエフェクト機能の基本的な使い方について紹介。
jQuery UIとは？
jQuery UIは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、ユーザー・インターフェイス（UI）に関わる機能を提供します。jQuery UIの導入方法や使い方、jQuery UIが提供する主要なコンポーネントについては、「jQuery UI逆引きリファレンス： jQuery UIを利用するには？」を参照してください。
jQueryでは、標準でもさまざまなエフェクト機能が提供されていますが、jQuery UIはこれらの機能をさらに拡張し、よりリッチな効果を、シンプルなコードで実装できます。機能の拡張は、jQuery標準のメソッドに対して引数を追加する、という形で行われていますので、jQueryを使い慣れた人にとっては、直感的に利用できるのもうれしいポイントです。
本稿で紹介するのは、要素の表示／非表示を制御するshow／hide／toggleメソッド、そして、エフェクト適用のための汎用的なメソッドeffectです。
要素の表示／非表示時にエフェクトを適用する ― show／hide／toggleメソッド
jQuery UIでは、jQuery標準のshow／hide／toggleメソッドを拡張して、要素の表示／非表示の際にもエフェクトを指定できます。例えば以下は、選択ボックスで指定されたエフェクトで、要素を表示／非表示するサンプルです。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Effect</title>
<link type="text/css" rel="stylesheet"
href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
// ボタン・クリックで表示／非表示を切替
$('#run').click(function() {
// 選択ボックスの値に応じてエフェクトを切り替え
$('#box').toggle($('#eff').val(), 2000);
});
});
</script>
</head>
<body>
<select id="eff">
<option value="blind">Blind</option>
<option value="bounce">Bounce</option>
<option value="clip">Clip</option>
<option value="drop">Drop</option>
<option value="explode">Explode</option>
<option value="fold">Fold</option>
<option value="highlight">Highlight</option>
<option value="puff">Puff</option>
<option value="pulsate">Pulsate</option>
<option value="scale">Scale</option>
<option value="shake">Shake</option>
<option value="size">Size</option>
<option value="slide">Slide</option>
</select>
<input id="run" type="button" value="Go" />
<div id="box" style="width:130px;height:130px;background-color:#ff0">いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせすん</div>
</body>
</html>
|
「explode」を選択して［Go］ボタンをクリック
拡張されたshow／hide／toggleメソッドの構文は、以下のとおりです（以下はtoggleメソッドのそれを示していますが、show／hideメソッドも同様です）。
［構文］toggleメソッド
toggle(effect [,opts] [,dur] [,callback])
- effect： エフェクトの種類
- opts： エフェクトのオプション
- dur： 再生時間（ミリ秒）
- callback： エフェクト終了時に実行するコールバック関数
太字の部分が、jQuery UIで拡張された引数です。引数effect／optsに指定できる値には、以下のようなものがあります。それぞれの動きは、上のサンプルコードで確認してください。
| 名称 | 概要 | ||
|---|---|---|---|
| オプション名 | 概要 | デフォルト値 | |
| blind | 上下（左右）にブラインドを開く／閉じるように | ||
| direction | 要素を非表示にする際の方向（up、down、left、right、vertical、horizontal） | up | |
| bounce | バウンドするように | ||
| distance | バインドの最大距離（px） | 20 | |
| times | バウンドする回数 | 5 | |
| clip | 中央から上下（左右）に開く／閉じるように | ||
| direction | 開閉の方向（vertical、horizontal） | vertical | |
| drop | 指定方向にスライドしながらフェードイン／アウト | ||
| direction | スライドの方向（up、down、left、right） | left | |
| explode | 欠片が集まるように表示＆爆発するように非表示 | ||
| pieces | 分かれる欠片の数 | 9 | |
| fade | フェードアウト／イン | ||
| － | － | － | |
| fold | 左右→上下に折り畳むように開く／閉じる | ||
| size | 最初に折り畳まれた時の幅（高さ） | 15 | |
| horizFirst | 最初に左右に折り畳むか | false | |
| hightlight | ハイライトするように光ってから元の色に | ||
| color | ハイライトの色 | #ffff99 | |
| puff | ふわっと膨らむように＆膨らんだものが元の大きさに | ||
| percent | 膨らむ度合い（％） | 150 | |
| pulsate | 点滅 | ||
| times | 点滅する回数 | 5 | |
| scale | 拡大／縮小 | ||
| direction | 拡大／縮小の方向（both、vertical、horizontal） | both | |
| origin | 消える／現れるポイント（top、middle、bottom、left、center、right*1） | ["middle", "center"] | |
| percent | 拡大する割合 | － | |
| shake | 左右（上下）に揺れる | ||
| direction | 最初に揺れる方向（left、right、up、down） | left | |
| distance | 揺れる幅 | 20 | |
| times | 揺れる回数 | 3 | |
| size | 指定のサイズに要素をリサイズ | ||
| to | リサイズ後のサイズ | － | |
| origin | 基点となる位置（top、middle、bottom、left、center、right） | ["top", "left"] | |
| slide | 左から右へ（上から下へ）スライドするように | ||
| direction | スライド方向（left、right、top、bottom） | － | |
| distance | スライドする距離 | ターゲット要素のサイズによる | |
- *1 middleは縦方向の中央位置、centerは横方向の中央位置を表します。
エフェクトを独立して利用する ― effectメソッド
先ほどの表で示したエフェクトは、effectメソッドを利用することで表示／非表示の動作とは切り離して動作させることもできます*2。
- *2 show／hide／toggleメソッドも、内部的にはeffectメソッドを呼び出しているにすぎません。
|
$(function() {
$('#run').click(function() {
$('#box').effect($('#eff').val(), 2000);
});
});
|
「Shake」を選択して［Go］ボタンをクリック
ボックス枠が左右に揺れるエフェクトが適用される
ただし、以下のエフェクトについてはアニメーションの実行後に要素が非表示になってしまう（＝hideメソッドと同じ動作）ので、注意してください。
- blind
- clip
- drop
- explode
- fold
- puff
※以下では、本稿の前後を合わせて5回分（第13回～第17回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
15. 【現在、表示中】≫ jQuery UIの拡張されたエフェクトを利用するには？（show／hide／toggle／effect編）
jQuery標準の各種エフェクト機能を拡張して、よりリッチな効果をシンプルなコードで実現できる、jQuery UIのエフェクト機能の基本的な使い方について紹介。
16. jQuery UIで拡張されたエフェクト機能を利用するには？（effect／xxxxxClass編）
jQuery標準の各種エフェクト機能を拡張して、よりリッチな効果をシンプルなコードで実現できる、jQuery UIのエフェクト機能の中から、effectメソッドで利用できるtransferエフェクト、スタイル・クラスを着脱するxxxxxClassメソッドついて紹介。
17. AutoCompleteウィジェットでオートコンプリート機能付きのテキストボックスを生成するには？
テキストボックスに最初の何文字かを入力すると、それにマッチする候補リストを表示するオートコンプリート機能を実現できる、AutoCompleteウィジェットの基本的な実装方法を紹介。
