.net column

.NET開発者のためのブログメディア
Webデザイン

jQueryで要素の表示と非表示を行う方法その2【showとhide】

2020年03月26日

jQueryでは、showメソッド・hideメソッドを使うことで要素の表示・非表示を切り替えることができます。今回は、show / hideメソッドの概要から実際の使い方までを解説していきます。ぜひ、参考にしてみてください。

PM
show / hideメソッドは、jQueryで用意されている要素表示のエフェクトの中でも特に基本的なメソッドとなります。ぜひ覚えておきましょう。
PG
そうだったのですね。分かりました!

show / hideメソッドとは

名前から何となく想像はつくかと思いますが、showメソッドは“要素を見せる(表示する)”、hideメソッドは”要素を隠す(非表示にする)”ためのメソッドです。
記述する際は次のようになります。
■要素を見せる
$(セレクタ).show();

■要素を隠す
$(セレクタ).hide();

単純にこれらを呼び出すと、即座に要素を見せたり隠したりすることができます。しかしウェブページの中には、”だんだんと要素を見せたい(隠したい)“などと「速度」を指定したいこともありますよね。

show / hideメソッドでは、次のようにメソッドにパラメーターを渡すことで“どのくらいの速度で要素を見せる(隠す)のか”を指定することができます。速度は、jQuery側で用意されている定義済みの文字列 [ slow(600msec) / normal(400msec) / fast(200msec) ] もしくはミリ秒単位の数値で指定します。

■要素を見せる
定義済みの文字列:$(セレクタ).show(‘slow’);
ミリ秒単位の数値:$(セレクタ).show(1500);

■要素を隠す
定義済みの文字列:$(セレクタ).hide(‘fast’);
ミリ秒単位の数値:$(セレクタ).hide(100);

show / hideメソッドで表示・非表示を切り替えてみよう

ここでは、実際にshow / hideメソッドを使って要素の表示・非表示を切り替えていきます。
ソースコードは次のとおりです。

実行すると次のような結果になります。

デフォルトでロゴを非表示にしているため、まだ何も表示されていませんね。
非表示の状態

では、[ゆっくり表示] ボタンを押してみましょう。
ゆっくり表示

すると・・・
ゆっくり表示の結果

きちんとロゴが表示されましたね。
もちろん、[ゆっくり非表示] ボタンを押すと再度ロゴを非表示にすることができます。

PM
今回は解説しませんでしたが、show / hideメソッドでは表示・非表示のアニメーション完了時に実行するコールバック関数を指定することもできるんですよ。
PG
なるほど。「jQueryで要素の表示と非表示を行うその1」で学んだ display プロパティよりもより柔軟なメソッドなんですね。

show / hideメソッドで自由自在にコンテンツを操作しよう

速度を指定して要素の表示・非表示を切り替えることができる「show / hideメソッド」。show / hideメソッドを活用して自由自在にコンテンツを操作し、ユーザーにとって使いやすいウェブページを作成してみてはいかがでしょうか。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

求人一覧

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)