jQueryを使用した表示非表示に関する考察

考察というほどではありませんが

ボタンを押したら表示非表示が切り替わる、これをjQueryを使用して実装する場合

jQuery(document).ready(function(){

 $('.btn').click(function(){
   $('.window').toggle();
 });

 });

こんな感じですね。
簡単に解説すると

classに【btn】がついている要素を押せば、classに【window】がついている要素が「toggle()」します

「toggle()」を使うと、開いているときは閉じて、閉じているときは開くという動きが簡単に実装できます
※ほかにも「slideToggle()」とかがあります。どんな動きになるか是非試してみましょう

ここで大切なこと

連打すると、連打しただけ開閉を繰り返します。

これが実は悩ましい。
ボタンを押して発火するような今回のパターンであればあまり問題はないのですが
マウスオーバーで発火する場合は厄介です。

なので、おまじない

jQuery(document).ready(function(){

 $('.btn').click(function(){
   $('.window').stop().toggle();
 });

 });

「toggle()」の前に「stop()」を実行させます。
これで、連打しても「stop()」が働いてくれるおかげで、連打分のモーションがたまりません。

アクションをさせるときは、必ず「stop()」をつけるべきかそうでないべきか、考えておかなければいけません。