fadeIn, slideToggle and animate(): jQuery Effects on a Modern Engine

These shims exist so jQuery code migrates without edits. They use milliseconds (jQuery's unit), accept a completion callback with this bound to each element, and return the collection for chaining. .slideDown() measures the element's natural height, so it works with dynamic content.

For new code, prefer $.to() and await — they are more flexible and composable.

Live · Accordion, notice and progress

They return the collection, so .slideUp(200).addClass('closed') works.

View the source for this demo

HTML

<div id="fx-faq">
  <div class="fx-q"><button type="button" aria-expanded="false" aria-controls="fx-a1">Does .fadeIn() still take milliseconds? <span aria-hidden="true">＋</span></button>
    <div class="fx-a" id="fx-a1" style="display:none">Yes. The classic effects keep jQuery's units and callbacks.</div></div>
  <div class="fx-q"><button type="button" aria-expanded="false" aria-controls="fx-a2">Can I chain them? <span aria-hidden="true">＋</span></button>
    <div class="fx-a" id="fx-a2" style="display:none">They return the collection, so <code>.slideUp(200).addClass('closed')</code> works.</div></div>
  <div class="fx-q"><button type="button" aria-expanded="false" aria-controls="fx-a3">What about .stop() and queues? <span aria-hidden="true">＋</span></button>
    <div class="fx-a" id="fx-a3" style="display:none">Not included. Use await or a timeline to sequence effects.</div></div>
</div>
<div class="row" style="margin-top:16px">
  <button type="button" id="fx-show">Save settings (fadeIn)</button>
  <button type="button" id="fx-upload">Upload (animate)</button>
</div>
<div id="fx-notice" class="note" role="status" style="display:none" data-mod="pulse"><strong>Saved</strong>Your settings were saved. <button type="button" id="fx-dismiss">Dismiss (fadeOut)</button></div>
<div class="fx-track" aria-hidden="true"><div id="fx-bar"></div></div>
<p class="muted" id="fx-status" aria-live="polite" style="font-size:14px"></p>

JavaScript

// Accordion: one open at a time
$('#fx-faq').on('click', '.fx-q > button', function () {
  const open = $(this).attr('aria-expanded') === 'true';
  $('#fx-faq .fx-q > button').not(this).attr('aria-expanded', 'false').next().slideUp(200);
  $(this).attr('aria-expanded', String(!open)).next().slideToggle(200);
});

$('#fx-show').on('click', () => $('#fx-notice').fadeIn(300));
$('#fx-dismiss').on('click', () => $('#fx-notice').fadeOut(300));

$('#fx-upload').on('click', function () {
  const full = $('.fx-track').width();
  $(this).prop('disabled', true);
  $('#fx-status').text('Uploading…');
  $('#fx-bar').css('width', 0).animate({ width: full }, 1200, 'power2.inOut', () => {
    $('#fx-status').text('Upload complete ✓');
    $(this).prop('disabled', false);
  });
});

More examples

Unchanged jQuery code

JavaScript

$('.toast').fadeIn(200);
$('#details').slideToggle(300);
$('.panel').animate({ marginLeft: 40, opacity: .6 }, 400, function () { $(this).addClass('moved'); });

API

.fadeIn([ms = 400] [, complete]) → self

Fade elements in (from hidden) or out (hiding when done).

Reference: .fadeIn() / .fadeOut() / .fadeToggle() →

.slideDown([ms = 400] [, complete]) → self

Animate height to reveal or collapse.

Reference: .slideDown() / .slideUp() / .slideToggle() →

.animate(props [, ms = 400] [, ease] [, complete]) → self

jQuery-signature tween of numeric CSS properties.

Reference: .animate() →

Migrating

Coming from jQuerySame names, units and callbacks. Not included: .stop(), .finish(), .delay(), .queue(), .fadeTo() and $.fx settings.

Related features

Motion

Tweens

Animate any numeric CSS property and transforms (x, y, rotate, scale) with $.to().

Open →Core

Geometry, scroll & visibility

Measure and position elements with width(), height(), offset() and position(), control scrolling with scrollTop(), and show or hide elements without losing their display value..

Open →Pulse

Conditional display

Show and hide parts of the page from state with kj-show.

Open →

Classic effects