ITコラム

プログラミングノウハウ

2018.10.30

#jQuery入門

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

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

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. hide メソッド
2. hide で要素を非表示
3. hide でフェードアウト
4. まとめ

1. hide メソッド

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

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

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

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

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

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

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

.hide( duration [, callback] )

duration
非表示までの所要時間をミリ秒又は文字列（ “fast” 又は “slow” ）で指定 “fast”：200 ミリ秒、”slow”：600 ミリ秒初期値：400
callback
非表示完了後に実行する関数を指定

.hide( [options] )

options
duration 非表示までの所要時間をミリ秒又は文字列（ “fast” 又は “slow” ）で指定 “fast”：200 ミリ秒、”slow”：600 ミリ秒初期値：400
easing 非表示までの動作の種類を指定初期値：swing
queue エフェクトのキューに、非表示までの動作を追加するか否かを指定 false の場合、非表示までの動作が直ぐに開始される初期値：true
specialEasing easing（非表示までの動作の種類）が指定された CSS プロパティを含むオブジェクトを指定
step 非表示までの動作のプロパティのために呼び出される関数を指定
progress 非表示までの動作の各ステップの後に実行する関数を指定
complete 非表示完了時に一度だけ実行する関数を指定
start 非表示までの動作開始時に実行する関数を指定
done 非表示までの動作完了時に実行する関数を指定
fail 非表示までの動作が失敗した時に実行する関数を指定
always 非表示までの動作が完了しても完了せずに停止しても実行する関数を指定

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

duration
非表示までの所要時間をミリ秒又は文字列（ “fast” 又は “slow” ）で指定 “fast”：200 ミリ秒、”slow”：600 ミリ秒初期値：400
easing 非表示までの動作の種類を指定初期値：swing
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 】要素をフェードアウトして非表示にをご参照下さい。

▲目次へ戻る