サンプルはこちら
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()」はフェードイン・フェードアウトする形で表示切り替えが行えます。
これも同様にスピードを制御できます。
トグルアニメーションで簡単にリッチな表現ができますが、濫用すると見た目にくどかったり使い勝手にも悪影響もあるので、さりげなく使う程度が良いでしょうk.