jQuery & JavaScript

jQuery fading effects: fadeIn, fadeOut, fadeTo and fadeToggle

jQuery & JavaScript · By the Postback Notes editorial team · Published 2026-08-21

jQuery's fade methods animate an element's opacity. fadeIn and fadeOut also show or hide it with display, fadeTo stops at a given opacity, and fadeToggle switches between the two states. They take a duration, an optional easing and a callback.

The four methods

<button type="button" id="in">Fade in</button>
<button type="button" id="out">Fade out</button>
<button type="button" id="half">Fade to 40%</button>
<button type="button" id="toggle">Toggle</button>
<div id="box" style="display:none;padding:1rem;background:#e6f4f1">Delivery is free this week.</div>

<script>
  $("#in").on("click", function () { $("#box").fadeIn(400); });
  $("#out").on("click", function () { $("#box").fadeOut("slow"); });
  $("#half").on("click", function () { $("#box").fadeTo(300, 0.4); });
  $("#toggle").on("click", function () { $("#box").stop(true).fadeToggle(250); });
</script>
MethodWhat it does
fadeIn(duration)Shows a hidden element, opacity 0 to 1
fadeOut(duration)Opacity to 0, then display: none
fadeTo(duration, opacity)Animates to the given opacity; the element stays displayed, even at 0
fadeToggle(duration)fadeIn if hidden, fadeOut if visible

Durations are milliseconds or the strings "fast" (200 ms) and "slow" (600 ms); the default is 400 ms. Easing is "swing" (default) or "linear" unless you add jQuery UI.

Callbacks, promises and chaining

// run code when the fade ends
$("#notice").fadeIn(300, function () {
  $(this).delay(3000).fadeOut(600);
});

// wait for several elements
$(".tip").fadeOut(200).promise().done(function () {
  $("#next-step").fadeIn(200);
});

Effects on the same element are queued: calling fadeIn then fadeOut runs them one after the other. delay() only affects the queue, not ordinary code.

Avoid animation build-up

If a user hovers in and out quickly, each event queues another animation, and the element keeps blinking after the mouse has left. Clear the queue first with stop(true), as in the toggle example:

$(".card").on("mouseenter", function () {
  $(this).find(".actions").stop(true, true).fadeIn(150);
}).on("mouseleave", function () {
  $(this).find(".actions").stop(true, true).fadeOut(150);
});

With ASP.NET panels

An asp:Panel renders a <div>. To fade it in on the client it must be rendered (server Visible="true") but hidden with CSS, for example style="display:none" or a class; a panel with Visible="false" is not in the page at all. After an asynchronous postback, re-run your setup code in a pageLoad() function or a PageRequestManager endRequest handler, because the panel's HTML has been replaced.

Accessibility and CSS alternative

jQuery effects respect jQuery.fx.off = true, which you can set when the user prefers reduced motion: jQuery.fx.off = window.matchMedia("(prefers-reduced-motion: reduce)").matches;. For new code, CSS transitions give the same result with less JavaScript and better performance: see Fade in and out with a CSS3 transition.

Official documentation