jQuery .hide() Method

What You’ll Learn

The .hide() method hides matched elements instantly or with a smooth animation. This tutorial covers the no-argument form since jQuery 1.0, duration strings like "slow" and "fast", complete callbacks, how jQuery saves the original display value for .show(), comparisons with .css() and .toggle(), the official jQuery API demos, and five practical try-it examples.

Introduction

Hiding content is one of the most common UI tasks in web development — closing menus, dismissing alerts, collapsing panels, and stepping through wizards. jQuery’s .hide() method hides every element in a matched set with a single line of code.

With no parameters, .hide() is the simplest approach: elements disappear immediately with no animation. Under the hood this is similar to .css( "display", "none" ), but jQuery also saves the element’s original display value so .show() can restore inline, block, flex, or whatever layout mode the element used before.

Pass a duration — a number in milliseconds or the strings "slow" (600 ms) or "fast" (200 ms) — and .hide() becomes an animation that shrinks width, height, and opacity together before setting display: none. Browse the jQuery DOM hub for related manipulation methods.

Understanding the .hide() Method

.hide( [duration ] [, complete ] ) operates on a jQuery collection. Each matched element is hidden; the method returns the same collection for chaining. Hidden elements remain in the DOM — they simply stop affecting page layout.

When animation is involved, jQuery fires a complete callback once per matched element after that element’s animation finishes. Inside the callback, this refers to the DOM element being animated. This is useful for removing nodes with .remove() only after the fade-out completes.

📝 Syntax

jQuery .hide() supports several forms:

Instant hide — since 1.0

.hide()

• No arguments — hides immediately with no animation.
• Saves the current display value for later .show() restoration.

Animated hide with duration

.hide( duration [, complete ] )

// Milliseconds (default animation length is 400 when duration provided)
.hide( 600 )

// Named speeds
.hide( "slow" )   // 600 ms
.hide( "fast" )   // 200 ms

Options object — since 1.0

.hide( {
  duration: 400,
  easing: "swing",
  complete: function() {
    // Called once per matched element when its animation finishes
  }
} )

Easing form — since 1.4.3

.hide( duration [, easing ] [, complete ] )

.hide( 600, "linear", function() {
  console.log( "Hidden!" );
} );

Examples Gallery

Example 1 covers instant hiding. Examples 2–5 follow the official jQuery API documentation — hide paragraphs on load, animate with "slow", fade an image with a callback, and remove divs after a timed hide. Use DevTools or the Try-it links to run each snippet in the browser.

$( ".target" ).hide();

// Equivalent effect to .css( "display", "none" )
// but jQuery saves the original display value for .show()

Before: .target elements visible in layout
After .hide(): display → none instantly
Elements still in DOM — .show() can restore them

No animation — fires immediately

$( "p" ).hide();

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

On load: all <p> elements hidden instantly
Visible: link text remains
Click link: link hides itself (preventDefault stops navigation)

Official jQuery API Example 1 pattern

$( "button" ).on( "click", function() {
  $( "p" ).hide( "slow" );
} );

// "slow"  → 600 ms
// "fast"  → 200 ms
// 400     → 400 ms (default when duration is a number)

Click "Hide 'em": paragraphs shrink and fade over 600 ms
Width, height, and opacity animate together
When complete: display set to none

Official jQuery API Example 2 pattern

$( "#clickme" ).on( "click", function() {
  $( "#book" ).hide( "slow", function() {
    alert( "Animation complete." );
  } );
} );

Click trigger: #book fades out over 600 ms ("slow")
When animation ends: alert("Animation complete.")
Callback runs once per matched element

Chain further actions inside complete

$( "div" ).on( "click", function() {
  $( this ).hide( 2000, function() {
    $( this ).remove();
  } );
} );

Click a box: 2-second shrink/fade animation
On complete: .remove() deletes the node from DOM
Multiple boxes can animate independently

Official jQuery API Example 4 pattern

🚀 Common Use Cases

• Dismiss alerts — hide error or success banners after the user reads them.
• Collapse panels — animate sections closed with .hide("slow") for smoother UX.
• Step wizards — hide the current step and show the next with .hide() / .show().
• Loading states — hide spinners instantly when Ajax completes.
• Self-hiding controls — hide a “Click to dismiss” link after interaction.
• Animated removal — fade out list items, then .remove() in the callback.

📝 Notes

• Available since jQuery 1.0; easing parameter added in jQuery 1.4.3.
• No-argument form hides instantly — roughly like .css( "display", "none" ) but saves the old value.
• "slow" = 600 ms, "fast" = 200 ms; numeric default when animating is 400 ms.
• With duration 0 or jQuery.fx.off = true, animation is skipped.
• Callback runs once per matched element, not once for the whole animation batch.
• Hidden elements remain in the DOM — use .remove() to delete nodes.
• Animating many elements at once may affect performance; profile if needed.

💡 Best Practices