jQuery .fadeTo() Animate to a Target Opacity

What Is .fadeTo()?

.fadeTo() (since jQuery 1.0) animates matched elements to a specific opacity between 0 and 1. It is like .fadeIn(), but that method always unhides and goes to full opacity. Returns the jQuery object for chaining.

$("#book").fadeTo("slow", 0.5);           // dim to 50%
$("#panel").fadeTo(400, 0.33);
$el.fadeTo(600, 1, "linear", complete);   // easing since 1.4.3
$el.fadeTo(0, 0.5);                       // instant = .css("opacity", 0.5)

// Duration required · opacity 0–1 · display unchanged

How to Use .fadeTo()

Pass a duration and a target opacity (0–1). Optionally add easing and a complete callback.

1. Select the target ($("#book")).
2. If it may be hidden and you need it visible, call .show() first.
3. Call .fadeTo(duration, opacity) — both arguments are required for a normal fade.
4. Optionally pass easing (since 1.4.3) and a complete callback.
5. For spam clicks, chain .stop(true, true) before .fadeTo().

Pseudocode

call $(elements).fadeTo(duration, opacity, easing?, complete?)

for each matched element:
    animate opacity → target (0…1) over duration
    do NOT change display

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

return the jQuery set for chaining

// Special case:
//   fadeTo(0, opacity)  ≡  css("opacity", opacity)

Cheat Sheet

Keep these facts handy while adjusting opacity.

Live Preview

Click Run to fadeTo a target opacity. Reset restores full opaque.

Ready — click Run to fadeTo.

jQuery Examples

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

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

Click → #book dims to 50% over 600 ms
Element stays in layout · complete callback runs

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

Click first p → fades to ~33% opacity
Second p is unchanged

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

Click a square → fadeTo("fast", random 0…1)
Each click picks a new opacity target

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

Click blue box → fades to 0.25 over 250 ms
Then previous sibling (label) becomes bold italic

$("#open").on("click", function () {
  $("#backdrop").show().fadeTo(600, 0.4);
  $("#modal").fadeIn(400);
});

$("#close").on("click", function () {
  $("#modal").fadeOut(300);
  $("#backdrop").fadeTo(400, 0, function () {
    $(this).hide();
  });
});

Open → backdrop shown, then dims to 0.4
Close → opacity → 0, then hide() in callback

Edge Cases & Pitfalls

Performance Notes

Opacity tweens are inexpensive for a few elements. Cost climbs with large sets or stacked queues — stop before fade, and dim one backdrop instead of dozens of children.

Key Takeaways