jQuery .hide() Method

What Is .hide()?

.hide() hides matched elements with display: none (since jQuery 1.0). Instant with no args; with a duration it becomes an animation. The previous display is saved for .show().

$(".target").hide()                 // instant
$("p").hide("slow")                 // 600ms animation
$("#box").hide(400, function () {   // ms + complete
  // this = current element
});

// "fast" = 200ms · default animated duration = 400ms

How to Use .hide()

Select elements, then hide instantly or with a duration.

1. Select the element(s) to hide.
2. Call .hide() for an instant hide, or pass a duration / options.
3. Optionally pass a complete callback (runs once per element).
4. Restore later with .show() — saved display comes back.

Pseudocode

for each matched element el:
    save current display value in jQuery data

    if no duration (or duration is 0):
        set display = none          // instant; skips queue
    else:
        animate width, height, opacity → 0
        then set display = none
        call complete(this = el) once per element

return original matched set

// .show() restores the saved display value

Cheat Sheet

Keep these facts handy while toggling visibility.

Live Preview

Hide the sample box instantly, slowly, or show it again.

$("#box").hide()
→ display becomes none (instant)

jQuery Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

$("p").hide();

Paragraphs disappear at once
Still in the DOM (display: none)

$("p").hide("slow");

Paragraphs shrink/fade (~600ms)
Then display is set to none

$("#box").hide();
$("#box").show();
// display restored from jQuery's cache

Box hidden, then visible again
Original display mode restored

$("#box").hide(400, function () {
  $(this).remove();
});

Box animates away
Then is removed from the DOM

$("p").hide();
$("a").on("click", function (event) {
  event.preventDefault();
  $(this).hide();
});

Paragraphs hidden on load
Link hides when clicked

Performance Notes

Instant hide is fine at scale. Animated hide on dozens of nodes can jank — animate one container instead of every child.

Key Takeaways