jQueryのhide()とCSSのdisplay:noneの違い

`hide()`はただのdisplay:noneではない

結論から言うと、jQueryの`hide()`は単に`display:none`を設定しているだけの関数ではありません。
見た目の結果は似ていますが、内部で行っている処理と副作用がかなり違います。

その違いを理解していないと、

• クリックできなくなる
• 表示が戻らない
• レイアウトが壊れる
• アニメーションが変になる

といった現象に遭遇します。

CSSの`display:none`とは何をしているのか

まずCSSの`display:none`です。

.box{
  display:none;
}

これはブラウザに対して
「この要素はレイアウトに参加しない」
と指示しています。

結果：

• 画面に表示されない
• サイズを持たない
• クリック不可
• レイアウトから完全に消える

DOMから削除されるわけではありませんが、レイアウト計算上は存在しない扱いになります。

JavaScriptから設定する場合：

document.getElementById("box").style.display = "none";

非常にシンプルです。

jQueryの`hide()`がやっていること

では`hide()`です。

$("#box").hide();

これは内部で単純なstyle変更をしている…わけではありません。

jQueryは次の情報を保持します。

• 元のdisplay値
• 要素の可視状態
• アニメーション状態（バージョンによる）

つまり`hide()`は「不可視にする命令」であり、
CSSプロパティの単純代入ではありません。

実際の挙動は次です。

1 現在のdisplay値を保存
2 displayをnoneに変更
3 jQuery内部データに状態記録

この保存処理が重要です。

`show()`との関係

なぜ保存するのでしょうか。
理由は`show()`です。

$("#box").show();

もし単純に`display:block`を設定してしまうと問題が起きます。

例えば元がインライン要素：

<span id="box">text</span>

`display:block`にするとレイアウトが変わります。

jQueryは元の値（inline, inline-block など）を復元します。
つまり`hide()`と`show()`はセットで動作する設計です。

CSSと混ぜると起きる問題

ここが実務で最も多いトラブルです。

.box{
  display:none;
}

$("#box").show();

これで表示されないことがあります。

理由は、CSSの優先順位です。
jQueryはstyle属性を書き換えますが、CSSの`!important`や特定のセレクタの方が優先される場合があります。

つまり

• CSSが非表示を指定
• jQueryが表示を指示

という矛盾が起きます。

アニメーション時の違い

さらに違いが出るのがアニメーションです。

$("#box").hide(400);

これは即座に`display:none`にはなりません。
内部的には以下が行われます。

• heightの縮小
• paddingの調整
• opacity変化
• 完了後display:none

つまり`hide()`は単なる表示切替ではなく、
アニメーション付き可視状態管理です。

CSSでは同じことは起きません。

display:none;

これは瞬時です。

`visibility:hidden`との違い

似たプロパティに`visibility:hidden`があります。

プロパティ	挙動
display:none	レイアウトから消える
visibility:hidden	位置は残る
jQuery hide()	状態管理付き非表示

`visibility:hidden`では空白が残りますが、`hide()`はレイアウトから消えます。

よくあるバグ

代表的なものです。

1 表示が戻らない**

$("#box").hide();
$("#box").css("display","block");
$("#box").show();

jQuery内部の保存状態と矛盾し、挙動が壊れます。

2 アニメーションが効かない**

CSSでdisplay:noneにすると、jQueryの`fadeIn()`が動かない場合があります。
理由は「初期状態が計算できない」ためです。

3 高さが0になる**

`hide()`直後に高さを取得すると0になります。

$("#box").hide();
console.log($("#box").height());

レイアウトから除外されているためです。

どちらを使うべきか

使い分けの目安です。

用途	推奨
静的非表示	CSS display:none
トグル表示	jQuery hide()/show()
アニメーション	jQueryまたはCSS transition
初期非表示	CSS

特に初期表示をjQueryで制御するのは注意が必要です。
ページ読み込み時に一瞬表示される「ちらつき」が発生します。

最後に

`hide()`と`display:none`は似ていますが、役割が違います。
CSSは見た目の定義、jQueryは状態の制御です。

問題が起きるのは、
見た目の仕組みと状態管理の仕組みを混在させたときです。

トラブルを避けるコツは単純で、
「最初の表示状態はCSS、操作はJavaScript」に分離することです。
この原則だけで、多くの不可解な表示バグは防げます。