jQuery【hide】要素を非表示にする

jQuery の hide メソッドを使用すると HTML 要素を非表示にさせることができます。
今回は、jQuery の hide メソッドの使用方法について解説いたします。

1. hide メソッド

　
hide メソッドは、指定した HTML 要素を非表示にすることができるメソッドです。

hide メソッドは、引数によって 4 通りの記述方法があります。

$(セレクタ).hide( );

$(セレクタ).hide( duration [, callback] );

$(セレクタ).hide( [options] );

$(セレクタ).hide( [duration] [, easing] [, callback] );

hide メソッドの引数の内容は、それぞれ以下の通りです。

.hide( duration [, callback] )

.hide( [options] )

.hide( [duration] [, easing] [, callback] )

▲目次へ戻る

2. hide で要素を非表示

　
hide メソッドを使用して、画像を非表示にします。
非表示ボタンをクリックしてみて下さい。
（ 表示ボタンをクリックすると、非表示になった画像が再表示されます。）

　
　

　
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
  $("#btn1").on("click", function() {
    $("#img1").hide();
  });

  $("#btn2").on("click", function() {
    $("#img1").show();
  });
});
//-->
</script>

<div style="background-color:#CCC; height:300px; padding:20px 20px 10px;">
  <input type="button" id="btn1" value="非表示">
　<input type="button" id="btn2" value="表示">
  <img id="img1" src="img.jpg" style="width:200px; height:200px;">
</div>

「$("#img1").hide();」のように、非表示にする要素を指定して hide メソッドを呼び出すと 指定した要素が非表示になります。

そして、非表示の要素を表示させる際には show メソッドを使用して「$("#img1").show();」のように記述します。

上のサンプルでは、img 要素を指定して画像を非表示にしていますが、上記のソースコードをそのまま試す場合は 画像の URL（ img 要素内の src 属性の値 ）にご注意下さい。
詳しくは、img要素をご参照下さい。

▲目次へ戻る

3. hide でフェードアウト

　
今度は、hide メソッドを使用して 要素を徐々に非表示にします。
非表示ボタンをクリックしてみて下さい。
（ 表示ボタンをクリックすると、非表示になった要素が再表示されます。）

　
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
  $("#btn3").on("click", function() {
    $("#spn1").hide(1200);
  });

  $("#btn4").on("click", function() {
    $("#spn1").show();
  });
});
//-->
</script>

<div style="background-color:#CCC; height:200px; padding:20px 20px 10px;">
  <input type="button" id="btn3" value="非表示">
　<input type="button" id="btn4" value="表示">
  <span id="spn1" style="color:blue;">夢の中で小人が出てきて、踊りませんかと言った。「僕」は疲れていたので申し出を断ると、小人はレコードに合わせて一人で踊った。それから「僕」に身の上話を語った。</span>
</div>

「$("#spn1").hide(1200);」のように、hide メソッドの引数に数値（ミリ秒）を設定すると 指定した要素が時間をかけて徐々に非表示になります。

尚、hide メソッドとは別に フェードアウトさせるための fadeout メソッドもあります。
fadeout メソッドの使用方法についてはjQuery【 fadeout 】要素 をフェードアウトして非表示にをご参照下さい。

▲目次へ戻る

4. まとめ

jQueryのhideメソッドについて、いかがでしたでしょうか。

「Webプログラマになりたいけど、独力では限界がある」と感じている方には、「プログラマカレッジ」がおすすめです。
「プログラマカレッジ」は本気でプログラマを目指す方のための、就職支援付き、受講料無料のプログラミングスクールです。

今回ご紹介した「jQuery」を含む豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。

→ 就職支援付き無料プログラミングスクール「プログラマカレッジ」

▲目次へ戻る