*

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

公開日: : 最終更新日:2015/08/03 jQuery

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

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

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

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

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

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

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

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

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

実行結果はこちらです。

スポンサードリンク

関連記事

catejQuery

表示状態を切り替える fadeIn()/fadeOut()

fadeIn()/fadeOut()は、文字通りです。 フェードイン・フェードアウトしながらHTM

記事を読む

catejQuery

ストライブテーブルを作成する。

ストライプテーブルとは、1行(列)おきに、異なる色を敷いた テーブルの事です。偶数行(列)、奇数行

記事を読む

catejQuery

マウスのボタン操作を感知する mousedown()/mouseup()

mousedown(),mouseup()は、特定の要素上でマウスの 何かしらのボタン(左ボタン・

記事を読む

catejQuery

ダブルクリックされたことを感知するdblclick()

特定の要素がダブルクリックされたときに、 何かしらの処理を実行したい場合は、 dblclick(

記事を読む

catejQuery

イベントが発生した要素を取得する

イベントを設定したい要素はひとつとは限らない場合が 多々あります。 今回は、eqセレクターを

記事を読む

jQuery

画像読込の進捗具合が分かるプログレスバーを作成

タイトルの通りです。読み込み中の画像を表示しないようにし、かつ画像読込の進捗度を表示してみます。

記事を読む

catejQuery

マウスオーバー、マウスアウトを感知する mouseover()・mouseout()

マウスオーバー、マウスアウトを感知する mouseover()・mouseout() これら

記事を読む

jQuery

ボタンにカーソルを乗せたとき色々と効果を付けてみる

今回は、ボタンに色々な効果を付けてみます。サンプルコードの実行結果はこちら サンプ

記事を読む

catejQuery

表示・非表示をスライドさせて切り替えるslidedown/slideUp()

slidedown/slideUp()は、セレクターで指定した要素の 表示・非表示をスライドアニメ

記事を読む

jQuery

jQueryで表示・非表示サイドバーを作ってみる

今回の内容は、クリック操作によってWebページの左側に格納できるサイドバーを作成します。サンプルコー

記事を読む

スポンサードリンク

Message

メールアドレスが公開されることはありません。

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">



スポンサードリンク

jQueryMobile
トグルスイッチを設定する

トグルスイッチ(toggle switch)とは、〇型のつまみを左右に

jQueryMobile
項目選択の複数ウィジェットをグループ化する

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグルー

jQueryMobile
<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するか

jQueryMobile
値を選択するボタンを表示する

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだ

jQueryMobile
ボタンを設定する

前回の記事では<a data-role="button">

→もっと見る

  • スポンサーリンク

PAGE TOP ↑