jQuery逆引きリファレンス
あらかじめ用意されたアニメーションを実行するには？（show／hide／fadeIn／fadeOut／slideUp／slideDown）
jQueryが提供する基本的なアニメーション機能を活用して、要素を表示／非表示、フェードイン／アウト、スライドアップ／ダウンさせる方法を説明する。
jQueryでは、典型的なアニメーションを実装するためのメソッドとして、以下のようなメソッドが用意されています。
| メソッド | 概要 |
|---|---|
| show | 要素を表示状態に |
| hide | 要素を非表示状態に |
| slideDown | 要素をスライドダウンして表示状態に |
| slideUp | 要素をスライドアップして非表示状態に |
| fadeIn | 要素をフェードインして表示状態に |
| fadeOut | 要素をフェードアウトして非表示状態に |
これらアニメーションメソッドは、それぞれ以下の構文で利用できます。
［構文］アニメーションメソッド
method([dur [,complete]])
- method： アニメーションメソッド
- dur： 再生時間
- complete： 再生終了後に実行する処理
例えば以下は、ページロード時に画像をスライドアップ→スライドダウンする例です。また、アニメーション終了時に完了メッセージをダイアログ表示します。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<div id="logo">
<img src="http://www.web-deli.com/image/home_chara.gif" alt="WebDeli" />
</div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function() {
// 画像をスライドアップ→スライドダウン
$('#logo')
.slideUp(3000)
.slideDown(3000, function() {
// アニメーション終了時に
window.alert('アニメーションが完了しました。');
});
});
</script>
</body>
</html>
|
アニメーションが実行される
アニメーションメソッドをメソッドチェーンで連結して呼び出した場合、アニメーションは記述順に実行されます。複数のアニメーションを並列に実行する方法については、後日「自作のアニメーションを実行するには？」で解説の予定です。
アニメーションによる変化の度合いを調整する
アニメーションメソッドの第2引数（引数durとcompleteの間）では、「変化の度合い（イージング）」を指定することもできます。
|
$('#logo')
.slideUp(3000, 'swing')
.slideDown(3000, 'linear', function() {
// アニメーション終了時に
window.alert('アニメーションが完了しました。');
});
|
jQueryデフォルトで利用できるイージングは以下の2種類だけです。
| 設定値 | 概要 |
|---|---|
| linear | 等速 |
| swing | 徐々に加速、最後に減速 |
ただし、イージングは、例えばjQuery UIを導入することで拡張できます。jQuery UIで利用できるイージングについては、以下のページも参考にしてください。
透明度を指定できるfadeToメソッドも
fadeIn／fadeOutメソッドが透明度（opacity）を0⇔1に変化させるメソッドであるのに対して、透明度を自由に指定できるfadeToというメソッドもあります。例えば以下のコードでは、マウスポインターを乗せると画像が半透明になり、外すと元に戻るサンプルです。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<div id="logo">
<img src="http://www.web-deli.com/image/home_chara.gif" alt="WebDeli" />
</div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function() {
$('#logo').hover(
// マウスをホバーした時に半透明に
function(e) {
$(this).fadeTo(500, 0.5);
},
// マウスを外した時に不透明に
function(e) {
$(this).fadeTo(500, 1);
}
);
});
</script>
</body>
</html>
|
マウスポインターを載せた状態
マウスポインターを外した状態
fadeToメソッドの第2引数が透明度を表します。0が完全に透明、1が不透明を表します。
処理対象：フェード カテゴリ：アニメーション
処理対象：スライド カテゴリ：アニメーション
API：.show()／.hide() カテゴリ：Effects（エフェクト） > Basics
API：.fadeIn()／.fadeOut() カテゴリ：Effects（エフェクト） > Fading
API：.slideUp()／.slideDown() カテゴリ：Effects（エフェクト） > Sliding
※以下では、本稿の前後を合わせて5回分（第22回～第26回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
22. イベント処理を中断するには？（preventDefault／stopPropagation／stopImmediatePropagation）
イベントリスナーによる処理を、イベントオブジェクトの3つのメソッドを使って中断する方法を説明する。また、それぞれの使い分け方法も解説する。
24. 【現在、表示中】≫ あらかじめ用意されたアニメーションを実行するには？（show／hide／fadeIn／fadeOut／slideUp／slideDown）
jQueryが提供する基本的なアニメーション機能を活用して、要素を表示／非表示、フェードイン／アウト、スライドアップ／ダウンさせる方法を説明する。
25. 実行都度、逆のアニメーションを実行するには？（toggle／fadeToggle／slideToggle）
jQueryが提供する基本的なアニメーション機能を活用して、スライドアップ⇔スライドダウンを交互に実行する方法を説明する。
