jQuery .fadeTo() Method

What You’ll Learn

The .fadeTo() instance method adjusts the opacity of matched elements to a specific value between 0 and 1. This tutorial covers both overloads since jQuery 1.0 (including easing since 1.4.3), the required duration parameter, per-element callbacks, comparisons with .fadeIn(), .fadeOut(), .animate({ opacity }), and .css("opacity"), and five hands-on examples from the official jQuery API plus a dim overlay pattern.

Introduction

Sometimes you do not want a full reveal or a complete hide — you want something in between. A modal backdrop at 40% opacity, a photo dimmed to half strength, or a quiz answer fading to 25% so the correct choice stands out. For those cases, .fadeTo() is jQuery’s dedicated opacity tweener.

Available since jQuery 1.0, .fadeTo() animates the opacity CSS property toward the number you pass. Unlike .fadeIn() and .fadeOut(), it never changes display. The element stays visible (or hidden) exactly as it was — only its transparency changes. It enqueues on the default fx queue like other effects, so you can chain it with .fadeIn(), .delay(), or another animation for polished sequential choreography.

Understanding the .fadeTo() Method

Per the official jQuery API, .fadeTo() adjusts the opacity of the matched elements. It is similar to .fadeIn(), but that method unhides the element and always fades to 100% opacity. .fadeTo() lets you pick any target opacity and leaves display untouched.

Durations are given in milliseconds; higher values indicate slower animations. The strings "fast" (200 ms) and "slow" (600 ms) work as presets. Unlike other effect methods, .fadeTo() requires that duration be explicitly specified — there is no default 400 ms shortcut.

📝 Syntax

Two overloads of .fadeTo:

// 1) Duration, opacity, and complete callback — since jQuery 1.0
jQuery( selector ).fadeTo( duration, opacity [, complete ] )
// 2) Duration, opacity, easing, complete — since jQuery 1.4.3
jQuery( selector ).fadeTo( duration, opacity [, easing ] [, complete ] )

Parameters

• duration (Number or String, required) — milliseconds, or "fast" (200) / "slow" (600). No default when omitted.
• opacity (Number, required) — a number between 0 and 1 denoting the target opacity (e.g. 0.5 = 50%).
• 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. this is the DOM element.

Return value

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

Official jQuery API description

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

Examples Gallery

Each example demonstrates an official jQuery API .fadeTo() pattern or a common real-world use case. Open DevTools or use the Try-it links. Examples 1–4 mirror live demos on api.jquery.com/fadeTo/.

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

#book starts fully visible; click dims it to 50% opacity over 600ms — element stays in layout

$( "p" ).first().on( "click", function() {
  $( this ).fadeTo( "slow", 0.33 );
} );

Click first paragraph: it fades to 33% opacity over 600ms; second paragraph unchanged

$( "div" ).on( "click", function() {
  $( this ).fadeTo( "fast", Math.random() );
});

Each click tweens the clicked div to a random opacity over 200ms — stacked colors shift unpredictably

$( "div" )
  .css( "cursor", "pointer" )
  .on( "click", function() {
    $( this ).fadeTo( 250, 0.25, function() {
      $( this )
        .css( "cursor", "" )
        .prev()
        .css( {
          "font-weight": "bolder",
          "font-style": "italic"
        } );
    } );
  } );

Clicked answer div fades to 25% over 250ms; callback bold-italicizes the preceding paragraph label

// Show modal — dim backdrop without hiding it
$( "#open-modal" ).on( "click", function() {
  $( "#backdrop" ).show().fadeTo( 600, 0.4 );
  $( "#modal" ).fadeIn( 400 );
});

// Close modal — restore backdrop to full opacity, then hide
$( "#close-modal" ).on( "click", function() {
  $( "#modal" ).fadeOut( 300 );
  $( "#backdrop" ).fadeTo( 400, 0, function() {
    $( this ).hide();
  });
});

Backdrop fades to 40% opacity over 600ms while staying visible; modal fades in. Close reverses with fadeTo(400, 0) then hide.

🚀 Common Use Cases

• Modal backdrops — dim overlay panels to 30–50% opacity while keeping them clickable and in layout.
• De-emphasizing content — fade inactive sections to partial opacity during focus modes or guided tours.
• Interactive quizzes — fade wrong answers to low opacity and style correct labels in the callback.
• Hover and focus states — tween images or cards to a softer opacity on interaction without hiding them.
• Cross-fade prep — dim the current slide before swapping content, then .fadeTo(400, 1) to restore.
• Effect chains — combine with .delay() and .fadeIn() for layered show/dim choreography on the fx queue.

📝 Notes

• Available since jQuery 1.0; easing overload added in 1.4.3.
• duration is required — unlike .fadeIn() and .fadeOut(), there is no default 400 ms when omitted.
• opacity must be a number between 0 and 1 (e.g. 0.5 for 50%).
• With duration set to 0, .fadeTo(0, opacity) is equivalent to .css("opacity", opacity).
• Does not unhide elements or set display: none — only the opacity property changes.
• Callbacks fire once per matched element — use .promise().done() for one set-level callback.
• Set jQuery.fx.off = true globally to disable all effects including .fadeTo() (duration becomes 0).

💡 Best Practices