表示中の要素を非表示にする hide()

hide()は、show()の逆の命令です。
表示されている状態(display:block)のHTML要素を
非表示(display:none)にします。

show()と同様にhide(...)の括弧内にはアニメーションの
スピードとコールバック関数を設定でき、指定した
スピードで透明度、高さ、幅を徐々に変化させながら
要素を非表示にします。

$( セレクター ).hide( スピード, コールバック関数 );

サンプルコードを実行すると分かりますが、
表示、非表示ボタンを押すと青い四角が消えたり、
現れたりしているのが分かるかと思います。

hide()はshow()と同様に、スピードの指定を省略すると
アニメーションの表示はしないで、すぐに非表示にします。

アニメーションが止まらないんだけど

サンプルコードの33行目～38行目のコードには
問題点があります。show()/hide()は１回のアニメーション処理が
終ってから次のアニメーション処理を実行するので

アニメーションの実行中に表示・非表示ボタンを素早く
連打すると、押した分だけアニメーションが行われ、
そのアニメーションが完全に終わるまで待たなければなりません。

この問題を解決するのが、アニメーション処理中の
要素を選択できるセレクター:animatedです。
:not(animated)と書くと、
「アニメーション処理中ではない要素」を
絞り込めます。その:animatedを使ったのが、サンプルコードの
４０行目～４５行目です。

実行結果はこちらです。