jQuery .fadeIn() Method

What You’ll Learn

The .fadeIn() instance method displays matched elements by fading them to opaque. 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 .show(), .fadeOut(), .fadeTo(), and .animate({ opacity }), and five hands-on examples from the official jQuery API.

Introduction

Instant .show() makes content appear in one frame. When you want a softer entrance — a tooltip, modal overlay, or gallery image materializing gradually — .fadeIn() is the shorthand jQuery effect for that job.

Available since jQuery 1.0, .fadeIn() animates opacity toward full visibility and handles the display property so hidden elements become shown. It enqueues on the default fx queue like other effects, which means you can chain it after .hide(), .delay(), or another animation for readable sequential reveals.

Understanding the .fadeIn() Method

Per the official jQuery API, .fadeIn() displays matched elements by fading them to opaque. It is similar to .fadeTo(), but unlike .fadeTo(), .fadeIn() unhides the element and always targets full opacity.

Elements should start hidden — typically via .hide() or CSS display: none. The method tweens opacity from 0 to 1 over the duration you supply, then leaves the element visible at full opacity.

📝 Syntax

Three overloads of .fadeIn:

// 1) Duration and complete callback
jQuery( selector ).fadeIn( [duration ] [, complete ] )
// 2) Options object — queue, step, Promise callbacks
jQuery( selector ).fadeIn( options )
// 3) Duration, easing, complete — since jQuery 1.4.3
jQuery( selector ).fadeIn( [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 hidden, show it slowly:
$( "#clickme" ).on( "click", function() {
  $( "#book" ).fadeIn( "slow", function() {
    // Animation complete.
  });
});

Examples Gallery

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

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

#book starts hidden; click reveals it with a 600ms opacity tween to full visibility

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

Click 1: red div fades in. Click 2: green. Click 3: blue. Each uses 600ms slow preset.

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

Red overlay fades in over 3s; when complete, hidden span text fades in over 100ms

$( "#alert-btn" ).on( "click", function() {
  $( "#alert-box" )
    .hide()
    .fadeIn( 800 );
});

Each click: alert box hides instantly, then fades back in over 800ms on the fx queue

$( "#reveal" ).on( "click", function() {
  $( "#panel" ).fadeIn( 600, "linear", function() {
    $( this ).text( "Fade complete at constant speed" );
  });
});

Panel fades in at steady linear pace over 600ms; callback updates text when done

🚀 Common Use Cases

• Modal and overlay entrances — fade in dimmed backdrops and dialog panels after .hide() reset.
• Progressive disclosure — reveal hidden divs one at a time on user interaction, as in the official demo.
• Notification toasts — chain .hide().fadeIn() for repeatable alert-style messages.
• Image galleries — cross-fade captions or thumbnails hidden with display: none.
• Sequential storytelling — slow overlay fade followed by quick text reveal via the complete callback.
• Effect chains — combine with .delay() and .fadeOut() 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.
• Similar to .fadeTo() but .fadeIn() unhides and always targets full opacity.
• Callbacks fire once per matched element — use .promise().done() for one set-level callback.
• Elements should be hidden first; calling on visible content produces minimal visible effect.
• Set jQuery.fx.off = true globally to disable all effects including .fadeIn() (duration becomes 0).

💡 Best Practices