Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery逆引きリファレンス

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

※以下では、本稿の前後を合わせて5回分(第23回~第27回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

jQuery逆引きリファレンス
23. 非同期通信で取得したコンテンツをページに反映させるには?(load)

loadメソッドを使って、外部のWebページを非同期に取得して、それをコンテンツ内の要素に反映させる方法を説明する。

jQuery逆引きリファレンス
24. あらかじめ用意されたアニメーションを実行するには?(show/hide/fadeIn/fadeOut/slideUp/slideDown)

jQueryが提供する基本的なアニメーション機能を活用して、要素を表示/非表示、フェードイン/アウト、スライドアップ/ダウンさせる方法を説明する。

jQuery逆引きリファレンス
25. 【現在、表示中】≫ 実行都度、逆のアニメーションを実行するには?(toggle/fadeToggle/slideToggle)

jQueryが提供する基本的なアニメーション機能を活用して、スライドアップ⇔スライドダウンを交互に実行する方法を説明する。

jQuery逆引きリファレンス
26. 自作のアニメーションを実行するには?(animate)

animateメソッドを使って、典型的なアニメーションではなく、カスタムのアニメーションを定義する方法を説明する。

jQuery逆引きリファレンス
27. アニメーションの細かな挙動を制御するには?(animate/show/hide/fadeIn/fadeOut/slideUp/slideDown)

各種アニメーションメソッドで、アニメーションを直列/並列に実行したり、アニメーション処理ごとに関数を実行したり、プロパティ単位でアニメーションのイージングを設定したりする方法を説明。

サイトからのお知らせ

Twitterでつぶやこう!