jQuery .fadeIn() Reveal Elements by Fading In

What Is .fadeIn()?

.fadeIn() (since jQuery 1.0) displays matched elements by fading them to opaque (opacity 1). It unhides the element and animates opacity. Returns the jQuery object for chaining.

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

// Unhides + fades to opacity 1
// Unlike .fadeTo() — that does not unhide

How to Use .fadeIn()

Hide the element first (or start with display: none), then call .fadeIn() from a click or other handler.

1. Select the target ($("#book")).
2. Ensure it is hidden (.hide() or CSS display: none).
3. On a user action, call .fadeIn() (optional duration / easing / complete).
4. jQuery restores display and animates opacity to 1.
5. For spam clicks, chain .stop(true, true) before .fadeIn().

Pseudocode

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

for each matched element:
    restore a visible display value
    animate opacity → 1 over duration

    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 reveals.

Live Preview

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

Ready — click Run to fadeIn.

jQuery Examples

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

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

Click → #book unhides and fades in over 600 ms
Complete callback runs when the fade ends

$("#trigger").on("click", function () {
  $("div:hidden").first().fadeIn("slow");
});

Click 1 → red box fades in
Click 2 → green box fades in
Click 3 → blue box fades in

$("a").on("click", function () {
  $(".overlay").fadeIn(3000, function () {
    $(".overlay span").fadeIn(100);
  });
  return false;
});

Overlay fades in over 3000 ms
Then the inner span fades in over 100 ms

$("#run").on("click", function () {
  $("#alert").hide().fadeIn(800, function () {
    $("#status").text("Fade in complete.");
  });
});

hide() → display:none instantly
fadeIn(800) → smooth reveal
Status updates when complete

$("#run").on("click", function () {
  $("#panel").hide();
  $("#panel").fadeIn(600, "linear", function () {
    $("#status").text("Complete — callback fired once per element.");
  });
});

Panel fades in over 600 ms at constant speed
Callback runs when that element finishes

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