Fading and sliding: jQuery | Himanshu Sharma

By the end of this lessonFade and slide elements in and out, fade to a partial opacity, and build an accordion and a dismissible notice with callbacks.

Fading

The fade methods animate opacity. At the end of a fade out, the element is also hidden with display: none, so the space it used closes:

html

<p id="tip" style="background: #fef3c7; padding: 8px">Tip: drafts are saved every minute.</p>
<button id="out">Fade out</button> <button id="in">Fade in</button>

<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script>
  $("#out").on("click", function () {
    $("#tip").fadeOut(function () {
      console.log("faded out; display =", $(this).css("display"));
    });
  });
  $("#in").on("click", function () {
    $("#tip").fadeIn("slow", function () {
      console.log("faded in; opacity =", $(this).css("opacity"));
    });
  });
</script>

result

faded out; display = none
faded in; opacity = 1

.fadeToggle() fades in if hidden and out if visible.

Fades work well for things that appear and disappear in the same place: notices, tooltips, overlays and images in a slideshow. Because the element keeps its size until the very end of a fade out, the rest of the page does not move while it fades, and then jumps once when the space closes. If that jump is distracting, slide the element up after fading it, or fade it to zero with .fadeTo() and remove it in the callback, as in the notice example below.

Fading part of the way

.fadeTo(duration, opacity) fades to any opacity between 0 and 1 and leaves the element visible. It is useful for dimming things, such as products that are out of stock, or the rest of a page behind a highlighted item:

html

<ul id="products"><li>Lamp</li><li class="sold-out">Desk</li><li>Chair</li></ul>
<button id="dim">Dim sold-out items</button>

<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script>
  $("#dim").on("click", function () {
    $(".sold-out").fadeTo(300, 0.4, function () {
      console.log($(this).text(), "opacity", $(this).css("opacity"), "| still visible:", $(this).is(":visible"));
    });
  });
</script>

result

Desk opacity 0.4 | still visible: true

Remember that dimming is a visual hint only. Also mark the state in text or with an attribute (for example "Sold out" or aria-disabled="true") so it is not lost on screen reader users.

A dismissible notice

Fade out, then remove the element in the callback once it is invisible:

html

<div class="notice" style="padding: 10px; background: #dcfce7">
  Your profile was saved. <button aria-label="Dismiss">×</button>
</div>

<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script>
  $(".notice").on("click", "button", function () {
    $(this).closest(".notice").fadeOut(200, function () {
      $(this).remove();
      console.log("notice removed:", $(".notice").length === 0);
    });
  });
</script>

result

notice removed: true

Removing it inside the callback means the fade finishes before the element disappears.

Sliding

The slide methods animate height (with padding and margin). The content below moves smoothly as the element grows or shrinks, which is ideal for panels that open in place:

html

<button id="toggle-filters" aria-expanded="false">Filters</button>
<div id="filters" style="display: none; background: #f1f5f9; padding: 8px">
  <label><input type="checkbox"> In stock</label><br>
  <label><input type="checkbox"> On sale</label>
</div>
<p>Product list...</p>

<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script>
  $("#toggle-filters").on("click", function () {
    const $btn = $(this);
    $("#filters").slideToggle(250, function () {
      $btn.attr("aria-expanded", $(this).is(":visible"));
      console.log("filters open:", $btn.attr("aria-expanded"));
    });
  });
</script>

result

filters open: true

.slideDown() opens a hidden element, .slideUp() closes a visible one, and .slideToggle() switches.

An accordion

An accordion opens one panel and closes the others. Sliding and sibling traversal combine nicely:

html

<style>
  .acc h4 { margin: 0; padding: 8px; background: #e2e8f0; cursor: pointer; border-top: 1px solid #fff; }
  .acc .panel { display: none; padding: 8px; }
</style>
<div class="acc">
  <h4>Delivery</h4><div class="panel">We deliver in 2 to 4 days.</div>
  <h4>Returns</h4><div class="panel">Return any item within 30 days.</div>
  <h4>Payment</h4><div class="panel">We accept cards and UPI.</div>
</div>

<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script>
  $(".acc").on("click", "h4", function () {
    const $panel = $(this).next(".panel");
    $(".acc .panel").not($panel).slideUp(200);
    $panel.slideToggle(200, function () {
      console.log($(this).prev("h4").text(), "open:", $(this).is(":visible"));
    });
  });
</script>

result

Returns open: true

For accessibility, real accordions use <button> elements inside the headings and aria-expanded; the HTML <details> element gives you a simple accordion with no JavaScript at all.

Easing

Every effect takes an optional easing name that controls the speed curve. jQuery includes two: "swing" (the default, slower at the start and end) and "linear" (constant speed). Plugins such as jQuery UI add more.

javascript

$("#panel").slideDown(300, "linear", function () { /* done */ });

Common mistakes

Expecting .fadeOut() to leave a gap: it hides the element at the end. Use .fadeTo(…, 0) to keep its space.
Removing an element before its fade finishes; remove it in the callback.
Sliding elements with a fixed CSS height or display: flex without testing; slides work best on block elements whose height comes from their content.
Starting a new effect on every click while the last is still running; the queue lesson shows how to stop that.

Exercise

Make a "Back to top" link that is hidden at first, fades in with .fadeIn() when a button labelled "Simulate scroll" is clicked, and fades out with .fadeOut() when the link itself is clicked.

Show one possible answer

html

<button id="scroll">Simulate scroll</button>
<a id="top" href="#" style="display: none">Back to top</a>

<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script>
  $("#scroll").on("click", () => $("#top").fadeIn(() => console.log("link shown")));
  $("#top").on("click", function (event) {
    event.preventDefault();
    $(this).fadeOut(() => console.log("link hidden"));
  });
</script>

result

link shown
link hidden

Key points

.fadeIn(), .fadeOut() and .fadeToggle() animate opacity and then show or hide the element.
.fadeTo(duration, opacity) fades to any opacity and leaves the element visible.
.slideDown(), .slideUp() and .slideToggle() animate height, which suits menus, accordions and panels.
Both families take a duration, an easing name and a callback, and default to 400ms.

Fading

Fading part of the way

A dismissible notice

Sliding

An accordion

Easing

Common mistakes

Exercise

Key points

Check yourself