jQueryの基礎：表示切り替え系トグルの種類

サンプルはこちら

See the Pen Basics of jQuery – Type of toggle by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

表示のON/OFFを簡単に行えるトグル関数にも種類があります。

HTML

<div class="content">
  <button class="slowToggle">トグル（スロー）</button> 
  <button class="slideToggle">スライドトグル</button>
  <button class="fadeToggle">フェードトグル</button>
</div>
<div class="popup" id="pop">
  <ul>
    <li><a href="">メニュー1</a></li>
    <li><a href="">メニュー2</a></li>
    <li><a href="">メニュー3</a></li>
    <li><a href="">メニュー4</a></li>
  </ul>
</div>

3つのボタンと表示切り替えを行うポップアップを配置しています。

JavaScript

動きの異なる3つのボタンごとに説明を分けます。

トグル（スロー）ボタン

$(".slowToggle").click(function(){
  $("#pop").toggle("slow");
});

「toggle()」関数は値を入れなければdisplayのnoneとblockを切り替えるだけですが、「toggle(“slow”)」「toggle(300)」といった形でスピードを指定すると表示させるアニメーションが発生します。

幅や透明度がゼロから始まった全ての変形が行われ変なアニメーションになりがちで、個人的にはあまりオススメではありません。

スライドトグル

$(".slideToggle").click(function(){
  $("#pop").slideToggle();
});

「slideToggle()」は文字通りスライドされるような形で表示切り替えが行えます。
これも「toggle()」同様に「slow」などの値や数値でスピードを制御できます。

フェードトグル

$(".fadeToggle").click(function(){
  $("#pop").fadeToggle();
});

「fadeToggle()」はフェードイン・フェードアウトする形で表示切り替えが行えます。
これも同様にスピードを制御できます。

トグルアニメーションで簡単にリッチな表現ができますが、濫用すると見た目にくどかったり使い勝手にも悪影響もあるので、さりげなく使う程度が良いでしょうｋ．