MENU


Animation Effects

The effects module (absent from the slim build) writes inline styles on each requestAnimationFrame tick. .show(), .hide(), .toggle(), .fadeIn(), .fadeOut(), .fadeToggle(), .fadeTo(), .slideDown(), .slideUp() and .slideToggle() take a duration (ms, 'fast' = 200 or 'slow' = 600), an easing ('swing' or 'linear') and a callback, or an options object. .animate(props, options) tweens numeric CSS properties. Effects on one element wait in the fx queue: .delay() pauses it, .queue(fn) adds a step, .stop() halts the current effect, .finish() completes all, and .promise() resolves when the queue is empty.

Chaining queued effects and timing their callbacksHTMLLive
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<div id="box" style="width:50px; height:50px; background:orange"></div>
<script>
  const t0 = performance.now(), $box = $('#box');
  const log = (m) => console.log(`${Math.round((performance.now() - t0) / 100) * 100} ms: ${m}`);
  $box.fadeOut(400, () => log('fadeOut done')).delay(200)
    .fadeIn('fast', () => log(`fadeIn done, opacity ${$box.css('opacity')}`))
    .animate({ width: 200, marginLeft: '+=20' }, 300, 'linear', () => log(`width ${$box.width()}`));
  log(`${$box.queue().length} steps queued`);
  $box.promise().then(() => log('promise resolved: queue empty'));
</script>

The chain returns at once; the running fadeOut counts as a queued step. A .queue(fn) step must call its next argument or the queue stalls. For new work, CSS transitions (Animation Properties) and the Web Animations API (Web Animations API) can animate opacity and transform off the main thread.