jQuery .fadeOut() Method

What You’ll Learn

The .fadeOut() instance method hides matched elements by fading them to transparent. This tutorial covers all three overloads since jQuery 1.0 (including easing since 1.4.3), default and preset durations, per-element callbacks, comparisons with .hide(), .fadeIn(), .fadeTo(), and .animate({ opacity }), and five hands-on examples from the official jQuery API.

Introduction

Instant .hide() removes content in one frame. When you want a softer exit — a tooltip vanishing, modal overlay dissolving, or notification sliding away gracefully — .fadeOut() is the shorthand jQuery effect for that job.

Available since jQuery 1.0, .fadeOut() animates opacity toward transparent, then sets display: none so the element no longer affects layout. It enqueues on the default fx queue like other effects, which means you can chain it before .fadeIn(), after .delay(), or alongside another animation for readable sequential hide-and-show choreography.

Understanding the .fadeOut() Method

Per the official jQuery API, .fadeOut() hides matched elements by fading them to transparent. Once opacity reaches 0, the display style property is set to none, so the element no longer affects the layout of the page.

Elements should start visible. The method tweens opacity from 1 toward 0 over the duration you supply, then removes the element from the layout flow with display: none.

📝 Syntax

Three overloads of .fadeOut:

// 1) Duration and complete callback
jQuery( selector ).fadeOut( [duration ] [, complete ] )
// 2) Options object — queue, step, Promise callbacks
jQuery( selector ).fadeOut( options )
// 3) Duration, easing, complete — since jQuery 1.4.3
jQuery( selector ).fadeOut( [duration ] [, easing ] [, complete ] )

Parameters

• duration (Number or String, default 400) — milliseconds, or "fast" (200) / "slow" (600).
• easing (String, default "swing", since 1.4.3) — built-in swing or linear; plugins add more.
• complete (Function) — called once per matched element when that element’s fade finishes.
• options.queue (Boolean or String, default true) — false runs immediately; string names a custom queue.
• options.step, progress, start, done, fail, always — same Promise-style hooks as other effects (since 1.8).

Return value

• A jQuery object for chaining further queued methods on the same set.

Official jQuery API description

// With the element initially shown, hide it slowly:
$( "#clickme" ).on( "click", function() {
  $( "#book" ).fadeOut( "slow", function() {
    // Animation complete.
  });
});

Examples Gallery

Each example demonstrates an official jQuery API .fadeOut() pattern. Open DevTools or use the Try-it links. All five mirror live demos on api.jquery.com/fadeOut/.

// With the element initially shown, we can hide it slowly:
$( "#clickme" ).on( "click", function() {
  $( "#book" ).fadeOut( "slow", function() {
    // Animation complete.
  });
});

#book starts visible; click hides it with a 600ms opacity tween to transparent, then display:none

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

Click any paragraph: all p elements fade to transparent over 600ms, then display:none

$( "span" ).on( "click", function() {
  $( this ).fadeOut( 1000, function() {
    $( "div" ).text( "'" + $( this ).text() + "' has faded!" );
    $( this ).remove();
  });
});

Clicked span fades over 1s; callback logs its text to div and removes the span from DOM

$( "#btn1" ).on( "click", function() {
  function complete() {
    $( "<p>" ).text( this.id ).appendTo( "#log" );
  }
  $( "#box1" ).fadeOut( 1600, "linear", complete );
  $( "#box2" ).fadeOut( 1600, complete );
});
$( "#btn2" ).on( "click", function() {
  $( "div" ).show();
  $( "#log" ).empty();
});

box1 fades at constant linear rate; box2 uses swing curve. Show button restores both and clears log.

// Toggle loop — hide then show again on fx queue
$( "#toggle-btn" ).on( "click", function() {
  $( "#panel" ).fadeOut( 400 ).fadeIn( 400 );
});

// Dismiss notification — remove from DOM after fade
$( "#dismiss-btn" ).on( "click", function() {
  $( "#notification" ).fadeOut( 300, function() {
    $( this ).remove();
  });
});

Toggle: panel fades out 400ms then fades back in. Dismiss: notification fades 300ms then is removed from DOM.

🚀 Common Use Cases

• Modal and overlay exits — fade out dimmed backdrops and dialog panels before removing them from the DOM.
• Dismissible notifications — fade out toast messages, then .remove() in the callback for permanent cleanup.
• Progressive removal — fade out list items one at a time on user interaction for staggered exits.
• Image galleries — cross-fade captions or thumbnails by fading out the current slide before showing the next.
• Interactive text — click-to-fade paragraphs or spans as in the official API demos.
• Effect chains — combine with .delay() and .fadeIn() for full show/hide choreography on the fx queue.

📝 Notes

• Available since jQuery 1.0; easing overload added in 1.4.3; Promise callbacks in options since 1.8.
• Default duration is 400 ms; "fast" = 200 ms, "slow" = 600 ms.
• Once opacity reaches 0, display is set to none so the element no longer affects layout.
• Callbacks fire once per matched element — use .promise().done() for one set-level callback.
• Will not hide elements already considered hidden — see the jQuery :hidden selector for details.
• Set jQuery.fx.off = true globally to disable all effects including .fadeOut() (duration becomes 0).

💡 Best Practices