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

.NET開発者のためのブログメディア

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メソッドを使って要素の表示・非表示を切り替えていきます。
ソースコードは次のとおりです。

<script type="text/javascript">
    // ゆっくり表示
    $(function(){
        $("button#show1").click(function () {
            $("img#logo").show("slow");
        });
    });
    // ゆっくり非表示
    $(function(){
      $("button#hide1").click(function () {
            $("img#logo").hide("slow");
        });
});
</script>

// ゆっくり表示

$(function(){

$("button#show1").click(function () {

$("img#logo").show("slow");

});

// ゆっくり非表示

$(function(){

$("button#hide1").click(function () {

$("img#logo").hide("slow");

});

</script>

<body>
<div>
    <!-- デフォルトは非表示に設定 -->
        <img id="logo" style=”display: none;” src="logo.png">
    </div>
    <div>
        <button id="show1">ゆっくり表示</button>
        <button id="hide1">ゆっくり非表示</button>
    </div>
</body>