要素を表示

2024 7/30

2024.05.17 2024.07.30

記事の内容

概要

showメソッドは、非表示要素を表示状態にするために使用します。

show

記法

$(selector).show(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のshowメソッドについて</title>
    <link rel="stylesheet" href="./main.css" />
  </head>
  <body>
    <p>チェックボックスを選択してみて</p>
    <form>
      <label for="subscribe">ニュースレターを購読する</label>
      <input type="checkbox" id="subscribe" name="subscribe" />

      <div id="email_field">
        <label for="email">メールアドレス</label>
        <input type="email" id="email" name="email" />
      </div>
    </form>

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

// ページの読み込みが完了
$(function () {
  // 初期状態でメールフィールドを非表示
  $("#email_field").hide();

  // チェックボックスの状態に応じてメールフィールドを表示/非表示
  $("#subscribe").change(function () {
    if ($(this).is(":checked")) {
      $("#email_field").show("slow");
    } else {
      $("#email_field").hide("slow");
    }
  });
});

/* 初期状態で非表示に設定 */
#email_field {
  display: none;
}

出力結果

チェックボックスを選択してみて

コールバック処理を含む

show

記法

$(selector).show(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のshowメソッドについて</title>
    <link rel="stylesheet" href="./main.css" />
  </head>
  <body>
    <button id="show_button">表示</button>
    <div id="show" class="example-class">これは表示されるテキストです。</div>

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

// ページの読み込みが完了
$(function () {
  // ボタンがクリックされたときに要素を表示
  $("#show_button").click(function () {
    $("#show").show("slow", function () {
      // コールバック関数
      alert("要素が表示されました。");
    });
  });
});

#show {
  display: none;
  font-size: 18px;
  color: blue;
}

出力結果

これは表示されるテキストです。