.NET開発者のためのブログメディア
jQueryで要素の表示と非表示を行う方法その2【showとhide】
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メソッドを使って要素の表示・非表示を切り替えていきます。
ソースコードは次のとおりです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script type="text/javascript"> // ゆっくり表示 $(function(){ $("button#show1").click(function () { $("img#logo").show("slow"); }); }); // ゆっくり非表示 $(function(){ $("button#hide1").click(function () { $("img#logo").hide("slow"); }); }); </script> |
|
1 2 3 4 5 6 7 8 9 10 |
<body> <div> <!-- デフォルトは非表示に設定 --> <img id="logo" style=”display: none;” src="logo.png"> </div> <div> <button id="show1">ゆっくり表示</button> <button id="hide1">ゆっくり非表示</button> </div> </body> |
実行すると次のような結果になります。
デフォルトでロゴを非表示にしているため、まだ何も表示されていませんね。
では、[ゆっくり表示] ボタンを押してみましょう。
すると・・・
きちんとロゴが表示されましたね。
もちろん、[ゆっくり非表示] ボタンを押すと再度ロゴを非表示にすることができます。
- PM
- 今回は解説しませんでしたが、show / hideメソッドでは表示・非表示のアニメーション完了時に実行するコールバック関数を指定することもできるんですよ。
- PG
- なるほど。「jQueryで要素の表示と非表示を行うその1」で学んだ display プロパティよりもより柔軟なメソッドなんですね。
show / hideメソッドで自由自在にコンテンツを操作しよう
速度を指定して要素の表示・非表示を切り替えることができる「show / hideメソッド」。show / hideメソッドを活用して自由自在にコンテンツを操作し、ユーザーにとって使いやすいウェブページを作成してみてはいかがでしょうか。
