jQuery .fadeOut() Hide Elements by Fading Out

What Is .fadeOut()?

.fadeOut() (since jQuery 1.0) hides matched elements by fading them to transparent (opacity 0). When opacity reaches 0, display is set to none so the element leaves the layout. Returns the jQuery object for chaining.

$("#book").fadeOut();                    // default 400 ms
$("#book").fadeOut("slow", function () { /* done */ });
$("#panel").fadeOut(600, "linear");

// Fades opacity → 0 · then display: none
// Unlike .fadeTo() — that does not hide

How to Use .fadeOut()

Select a visible element, call .fadeOut() from a click (or other) handler, optionally pass duration, easing, or a callback.

1. Select the target ($("#book")).
2. Ensure it is visible (already shown, or call .show() first).
3. On a user action, call .fadeOut() (optional duration / easing / complete).
4. jQuery animates opacity to 0, then sets display: none.
5. For spam clicks, chain .stop(true, true) before .fadeOut().

Pseudocode

call $(elements).fadeOut(duration?, easing?, complete?)

for each matched element:
    if element is already hidden:
        skip (no unnecessary DOM work)
    else:
        animate opacity → 0 over duration
        set display: none

    if complete was provided:
        call complete once for this element
        (this = the DOM element)

return the jQuery set for chaining

Cheat Sheet

Keep these facts handy while building fade exits.

Live Preview

Click Run to fadeOut the sample panel. Change duration with the chips.

Ready — click Run to fadeOut.

jQuery Examples

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

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

Click → #book fades out over 600 ms
Then display: none · complete callback runs

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

Click any p → all paragraphs fade out over 600 ms
Layout space is released when display:none is set

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

Click "jacket" → fades over 1000 ms
Log shows 'jacket' has faded!
Span is removed from the DOM

$("#btn1").on("click", function () {
  function complete() {
    $("
").text(this.id + " done").appendTo("#log");
  }
  $("#box1").fadeOut(1600, "linear", complete);
  $("#box2").fadeOut(1600, complete);
});

$("#btn2").on("click", function () {
  $("div.box").show();
  $("#log").empty();
});

box1 fades with linear easing (1600 ms)
box2 fades with swing (default)
Each complete callback logs its id

$("#dismiss").on("click", function () {
  $("#toast").fadeOut(400, function () {
    $(this).remove();
  });
});

Dismiss → toast fades over 400 ms
Then the node is removed from the DOM

Edge Cases & Pitfalls

Performance Notes

Opacity fades are inexpensive for a few elements. Cost climbs with large sets or stacked queues — stop before fade, and prefer fading one wrapper over dozens of children.

Key Takeaways