jQuery逆引きリファレンス
実行都度、逆のアニメーションを実行するには？（toggle／fadeToggle／slideToggle）
2015年8月13日
jQueryが提供する基本的なアニメーション機能を活用して、スライドアップ⇔スライドダウンを交互に実行する方法を説明する。
ボタンをクリックする都度、（例えば）スライドアップ⇔スライドダウンを交互に実行したいというような状況はよくあります。その場合、別稿「あらかじめ用意されたアニメーションを実行するには？」のメソッドだけを使って実装するならば、以下のようなコードになります。
HTML
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<button id="btn">スライドアップ／スライドダウン</button>
<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() {
var flag = true;
// 変数flagの真偽に応じて、スライドアップ／スライドダウンを実施
$('#btn').click(function(e) {
if (flag) {
$('#logo').slideUp(3000, function() {
flag = false;
});
} else {
$('#logo').slideDown(3000, function() {
flag = true;
});
}
});
});
</script>
</body>
</html>
|
ボタンクリック都度にスライドアップ⇔スライドダウンを交互に実行するコード（slideToggle.html）
▼
スライドダウンして画像が徐々に表示される
▼
画像がスライドアップ／スライドダウンされる
ただし、いちいち現在の状態をフラグ管理しなければならないのは面倒です。そこで、jQueryでは以下のようなxxxxxToggleメソッドを用意しています。
| メソッド | 概要 |
|---|---|
| toggle | 表示／非表示を交互に実行 |
| fadeToggle | フェードイン／フェードアウトを交互に実行 |
| slideToggle | スライドアップ／スライドダウンを交互に実行 |
交互に逆のアニメーションを実行するメソッド
上の例であれば、slideToggleメソッドを利用することで、以下のように書き換えることができます。xxxxxToggleメソッドの構文は、その他のアニメーションメソッドと同じです。
JavaScript
|
$(function() {
$('#btn').click(function(e) {
$('#logo').slideToggle(3000);
});
});
|
xxxxxToggleメソッドで書き換えたコード（slideToggle.html）
処理対象：基本 カテゴリ：アニメーション
処理対象：フェード カテゴリ：アニメーション
処理対象：スライド カテゴリ：アニメーション
API：.show()／.hide() カテゴリ：Effects（エフェクト） > Basics
API：.fadeIn()／.fadeOut() カテゴリ：Effects（エフェクト） > Fading
API：.slideUp()／.slideDown() カテゴリ：Effects（エフェクト） > Sliding
処理対象：フェード カテゴリ：アニメーション
処理対象：スライド カテゴリ：アニメーション
API：.show()／.hide() カテゴリ：Effects（エフェクト） > Basics
API：.fadeIn()／.fadeOut() カテゴリ：Effects（エフェクト） > Fading
API：.slideUp()／.slideDown() カテゴリ：Effects（エフェクト） > Sliding
※以下では、本稿の前後を合わせて5回分（第23回～第27回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
24. あらかじめ用意されたアニメーションを実行するには？（show／hide／fadeIn／fadeOut／slideUp／slideDown）
jQueryが提供する基本的なアニメーション機能を活用して、要素を表示／非表示、フェードイン／アウト、スライドアップ／ダウンさせる方法を説明する。
25. 【現在、表示中】≫ 実行都度、逆のアニメーションを実行するには？（toggle／fadeToggle／slideToggle）
jQueryが提供する基本的なアニメーション機能を活用して、スライドアップ⇔スライドダウンを交互に実行する方法を説明する。
27. アニメーションの細かな挙動を制御するには？（animate／show／hide／fadeIn／fadeOut／slideUp／slideDown）
各種アニメーションメソッドで、アニメーションを直列／並列に実行したり、アニメーション処理ごとに関数を実行したり、プロパティ単位でアニメーションのイージングを設定したりする方法を説明。
