要素を非表示

2024 7/30

2024.05.17 2024.07.30

記事の内容

概要

hideメソッドは、選択した要素を非表示にするjQueryメソッドです。
※要素の高さと幅を減少

hide

記法

$(selector).hide(speed);
============================
selector : 対象の要素を指定するセレクター
speed : アニメーションの速度（省略可能。"slow", "fast", またはミリ秒単位の数値）

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jQueryのhideメソッドについて</title>
    <link rel="stylesheet" href="./main.css" />
  </head>
  <body>
    <button id="hide_button">非表示にする</button>
    <button id="reset_button">再表示する</button>
    <div id="hide_content">このテキストは非表示になります。</div>

    <!-- CDN取得 -->
    <script src="CDNのURL"></script>
    <script src="./main.js"></script>
  </body>
</html>

// ページの読み込みが完了
$(function () {
  // 非表示ボタンがクリックされたとき、hide_contentを非表示にする
  $("#hide_button").on("click", function () {
    $("#hide_content").hide("slow");
  });

  // リセットボタンがクリックされたとき、hide_contentを再表示する
  $("#reset_button").on("click", function () {
    $("#hide_content").show();
  });
});

#hide_content {
  padding: 20px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}

出力結果

このテキストは非表示になります。

コールバック処理を含む

hide

記法

$(selector).hide(speed, callback);
============================
selector : 対象の要素を指定するセレクター
speed : アニメーションの速度（省略可能。"slow", "fast", またはミリ秒単位の数値）
callback : アニメーション完了後に実行されるオプションの関数

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jQueryのhideメソッド(コールバック処理を含む)について</title>
    <link rel="stylesheet" href="./main.css" />
  </head>
  <body>
    <button id="hide_button">非表示にする</button>
    <button id="reset_button">再表示する</button>
    <div id="hide_content">このテキストは非表示になります。</div>

    <!-- CDN取得 -->
    <script src="CDNのURL"></script>
    <script src="./main.js"></script>
  </body>
</html>

// ページの読み込みが完了
$(function () {
  // 非表示ボタンがクリックされたとき、hide_contentを非表示にする
  $("#hide_button").on("click", function () {
    // hide_content表示時のみ & 連続クリック防止 hideメソッド処理を実行
    if ($("#hide_content").is(":visible") && !$("#hide_content").is(":animated")) {
      $("#hide_content").hide("slow", function () {
        // 非表示にされた後のコールバック関数
        alert("テキストが非表示になりました。");
      });
    }
  });

  // リセットボタンがクリックされたとき、hide_contentを再表示する
  $("#reset_button").on("click", function () {
    $("#hide_content").show();
  });
});

#hide_content {
  padding: 20px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}

出力結果

このテキストは非表示になります。