この記事の要点

.show() は非表示要素を表示するメソッド。display:none を解除して元の表示形式に戻す 速度指定: .show(400) や .show("slow") でアニメーション付きフェードイン コールバック: .show(400, function(){ ... }) で表示完了後に処理を実行 逆: .hide() で非表示、トグルは .toggle() で切替 CSS の !important 付き display:none は jQuery では上書き不可 — クラス切替に置き換える

jQuery .show() とは

.show() は非表示になっている要素を表示状態に戻す jQuery メソッドです。直前に .hide() や CSS で display:none されていた要素の display プロパティを元の値（block / inline / flex など）に復元します。

基本構文

<button id="btn">表示するボタン</button>
<p id="msg" style="display:none">非表示のメッセージ</p>

// 即座に表示
$("#btn").click(function () {
    $("#msg").show();
});

速度を指定してフェードイン

第 1 引数にミリ秒またはキーワードを渡すとアニメーションで表示されます。

// 400ms かけてフェードイン + 拡大
$("#msg").show(400);

// キーワードでも指定可能 (slow=600, normal=400, fast=200)
$("#msg").show("slow");

// コールバック: 表示完了後に実行
$("#msg").show(400, function () {
    console.log("表示完了!");
    $(this).addClass("visible");
});

呼び出し	挙動
.show()	即座に表示（アニメーションなし）
.show(400)	400ms かけて opacity + 縦横同時に拡大
.show("slow")	600ms かけてアニメーション
.show(400, cb)	400ms 後にコールバック実行
.show({duration: 400, easing: "swing"})	オブジェクト形式の詳細指定

類似メソッドとの違い

メソッド	動き	用途
.show()	display を元の値に戻す	非表示要素を表示
.hide()	display:none をセット	要素を非表示
.toggle()	表示 / 非表示を切替	クリックで開閉
.fadeIn()	opacity だけアニメーション	シンプルなフェード
.slideDown()	高さをアニメーション	アコーディオン

display プロパティの自動復元

.show() の賢いところは「元の display 値を覚えている」こと。div なら block、span なら inline、li なら list-item に戻ります。

// CSS で display:flex; に指定した要素を hide → show
$(".flex-container").hide();   // display:none
$(".flex-container").show();   // display:flex に戻る

!important の罠

CSS で display:none !important されていると、jQuery の .show() では上書きできません（インラインスタイルは !important に負ける）。

/* これが指定されていると .show() は効かない */
.hidden {
    display: none !important;
}

// NG
$(".hidden").show();  // 表示されない

// OK: クラスを切り替える
$(".hidden").removeClass("hidden");

// または addClass / removeClass で表示制御
$("#msg").addClass("active");

visibility:hidden との違い

jQuery の .show() / .hide() はdisplay プロパティを操作します。visibility:hidden（場所は確保するが見えない状態）は操作しません。

状態	レイアウト	表示	クリック
display:none	なし	×	×
visibility:hidden	残る	×	×
opacity:0	残る	×	○ （クリック可）

FAQ

Q: $(...).show() が効かないことがある
A: 親要素が非表示、CSS の !important 付き display:none、または要素が DOM に存在しない（追加前にセレクタを実行）可能性。Chrome DevTools の Computed パネルで実際の display を確認。

Q: モダン JS（jQuery なし）でやるなら？
A: document.getElementById("msg").style.display = "" でインライン値をクリア、または classList.remove("hidden") でクラス切替。

Q: .show() のアニメーションは GPU 加速される？
A: .show(400) は width / height / opacity を同時にアニメーションするため、合成レイヤーが作られる場合がある。重い場合は CSS transition + クラス切替の方が滑らか。

実践例: アコーディオン開閉

クリックでパネルを開閉する典型例。slideDown() / slideUp() も併用するとより滑らかに。

<div class="accordion">
  <h3 class="acc-header">セクション1</h3>
  <div class="acc-body" style="display:none">中身その1</div>

  <h3 class="acc-header">セクション2</h3>
  <div class="acc-body" style="display:none">中身その2</div>
</div>

$(".acc-header").click(function () {
    var $body = $(this).next(".acc-body");
    // 開閉切り替え（slideToggle が show/hide の高さ版）
    $body.slideToggle(300);
    $(this).toggleClass("open");
});

パフォーマンス上の注意

.show() の速度指定アニメーションは jQuery が内部で setInterval で毎フレーム描画するため、対象要素が多いとカクつきます。大量要素を同時表示する場合は CSS transition に置き換える、または requestAnimationFrame 系の軽量ライブラリ（GSAP 等）を検討。

モダン JS への置き換え

jQuery を撤去して Vanilla JS に置き換えるなら以下のパターン。

// jQuery: $("#msg").show();
document.getElementById("msg").style.display = "";

// jQuery: $(".target").hide();
document.querySelectorAll(".target").forEach(el => el.style.display = "none");

// jQuery: $("#msg").toggle();
const el = document.getElementById("msg");
el.style.display = (el.style.display === "none") ? "" : "none";