jQueryオブジェクト .hide()

jQueryオブジェクトのhideメソッドを使うと、HTML要素の表示を隠して、非表示にすることができる。jQueryオブジェクトが複数のHTML要素にマッチする場合は、複数の要素を非表示にすることができる。

構文

jQueryオブジェクトのhideメソッドには、同じ名前で引数が異なるオーバーロード（多重定義）された複数のメソッドが存在する。

jQueryObject.hide()

jQueryObject.hide(duration)

jQueryObject.hide(complete)

jQueryObject.hide(duration, complete)

jQueryObject.hide(options)

戻り値

jQueryオブジェクトのhideメソッドは、戻り値としてjQueryオブジェクト自身を返す。

引数

jQueryオブジェクトのhideメソッドには、以下に示す引数を指定できる。

duration

アニメーションの時間(ミリ秒)。省略した場合は、アニメーションしない。

<button id="b1">hide</button>
<button id="b2">show</button>
<img src="portrait.jpg" id="i1">
<script>
  $(function() {
    $('#b1').click(function() {
      $('#i1').hide(1000);
    });
    $('#b2').click(function() {
      $('#i1').show();
    });
  });
</script>

portrait

complete

アニメーションが完了したら呼び出されるコールバック関数を指定する。

<button id="b3">hide</button>
<img src="portrait.jpg" id="i2">
<script>
  $(function() {
    $('#b3').click(function() {
      $('#i2').hide(function(){
        $('#i2').show()
      });
    });
  });
</script>

portrait

options

フェードアウトのオプションをオブジェクトで指定する。オブジェクトには、以下に示すプロパティを指定できる。

duration: アニメーションの実行時間をミリ秒単位で指定する。
complete: アニメーションが完了したときに呼び出されるコールバック関数を指定する。jQueryオブジェクトが複数のHTML要素にマッチする場合、各要素のアニメーションが完了する度に複数回呼び出される。
start: アニメーションを開始するときに呼び出されるコールバック関数を指定する。jQueryオブジェクトが複数のHTML要素にマッチする場合、各要素のアニメーションを開始する度に複数回呼び出される。
done: アニメーションが完了したときに呼び出されるコールバック関数を指定する。jQueryオブジェクトが複数のHTML要素にマッチする場合、全ての要素のアニメーションが完了したときに１回だけ呼び出される。
fail: アニメーションが失敗したときに呼び出されるコールバック関数を指定する。jQueryオブジェクトが複数のHTML要素にマッチする場合、いずれかの要素でアニメーションが失敗すると、それ以降のアニメーション処理が中断され、１回だけ呼び出される。
always: アニメーションが完了または失敗したときに呼び出されるコールバック関数を指定する。jQueryオブジェクトが複数のHTML要素にマッチする場合、全てのアニメーションが完了したとき、または途中で失敗して中断したときに１回だけ呼び出される。

<button id="b4">hide</button>
<img src="portrait.jpg" id="i3">
<script>
  $(function() {
    $('#b4').click(function() {
      $('#i3').hide({
        duration: 1000,
        complete: function(){
          $('#i3').show();
        }
      });
    });
  });
</script>

portrait

参考文献

OpenJS Foundation (2025) .hide() | jQuery API Documentation

jQueryオブジェクト .hide()

構文

戻り値

引数

関連記事

参考文献