jQuery .hide() と CSS visibility: hidden の違いを徹底比較！

2024-04-10

jQuery .hide() と visibility: hidden の比較

jQuery .hide()

動作:
- 要素を非表示にするだけでなく、要素の幅と高さを0にします。
- アニメーション効果を追加できます。
- 要素の表示状態を display: none に変更します。
メリット:
- コードがシンプルで分かりやすい。
デメリット:

CSS visibility: hidden

メリット:
- レイアウトが崩れない。
- アニメーション効果が不要な場合は、軽量で効率的な方法。

アニメーション効果が必要な場合は、jQuery .hide() を使用します。
アニメーション効果が不要で、レイアウトを維持したい場合は、CSS visibility: hidden を使用します。

// jQuery .hide() を使用
$("button").click(function() {
  $(".box").hide();
});

// CSS visibility: hidden を使用
$("button").click(function() {
  $(".box").css("visibility", "hidden");
});

追加情報

その他の方法
- display: none を直接使用して要素を非表示にすることもできます。
- JavaScript の element.style.display = "none" を使用して要素を非表示にすることもできます。
パフォーマンス

補足

上記の説明は、基本的な動作のみを説明しています。
詳細については、各方法の公式ドキュメントを参照してください。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルコード</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <button>非表示にする</button>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $("button").click(function() {
      // jQuery .hide() を使用
      // $(".box").hide();

      // CSS visibility: hidden を使用
      $(".box").css("visibility", "hidden");
    });
  </script>
</body>
</html>