Effects and Animation

This section documents jQuery 3.x (the current major line — no specific patch version is pinned). This content was generated with the assistance of AI and should be verified against the official jQuery API reference before being relied on in production, since API details and deprecations continue to change between releases.

jQuery is legacy-leaning: modern browsers implement native equivalents for almost everything it does (querySelectorAll, classList, fetch, addEventListener, append/prepend/remove, the Web Animations API), and most current stacks — Bootstrap 5 included — have dropped it. Prefer the native APIs for new work; this reference is aimed at reading, maintaining, or incrementally migrating code that already uses jQuery. Every page ends with a Modern equivalent note pointing at the native replacement.

This section’s bibliography lists the reference material consulted while preparing these pages.

jQuery ships a small animation system built on setInterval/requestAnimationFrame. Every effect method takes an optional duration (milliseconds, or "slow" = 600, "fast" = 200) and an optional complete callback that runs once the animation finishes.

Show, hide, toggle

$('#panel').hide();               // instant: sets display:none
$('#panel').show();               // instant: restores the previous display value
$('#panel').hide(400);            // animated: shrinks size + fades opacity over 400ms
$('#panel').toggle(400, () => console.log('done'));  // hide if visible, else show

Fading

$('#img').fadeIn(300);
$('#img').fadeOut(300);
$('#img').fadeToggle(300);
$('#img').fadeTo(300, 0.4);        // fade to a specific opacity (0.4), keeps layout space

fadeOut ends at display:none; fadeTo only changes opacity and leaves the element occupying space.

Sliding

$('#menu').slideDown(200);         // animate height from 0 to auto
$('#menu').slideUp(200);           // animate height to 0, then display:none
$('#menu').slideToggle(200);

General-purpose .animate()

$('#box').animate(
  { width: '300px', opacity: 0.5, marginLeft: '+=40' },  // properties to tween
  600,                                                    // duration
  'swing',                                                // easing
  function () { /* complete callback; `this` is the element */ }
);

Notes on the properties object (referred to in prose it looks like { width: '300px', opacity: 0.5 }):

  • Only properties with numeric values can be animated — lengths, opacity, scrollTop. Colours and display cannot (jQuery UI adds colour tweening).

  • Relative values: '+=40' / '-=40' animate by a delta from the current value.

  • Special keywords: 'toggle', 'show', 'hide' as a value animate that property in/out.

  • Built-in easing is 'swing' (default, ease-in-out) and 'linear'. More easings (easeInOutQuad, …​) come from jQuery UI or a plugin.

Controlling the queue

Each element has its own FIFO effects queue (the "fx" queue). Calling an effect method while one is already running appends to that element’s queue rather than interrupting it; jQuery drains the queue one animation at a time.

flowchart TB A["chained calls on #box: slideDown(200), then fadeTo(200, 0.5), then animate(300)"] A --> q1["queue step 1: slideDown 200ms"] q1 --> q2["queue step 2: fadeTo 200ms"] q2 --> q3["queue step 3: animate 300ms"] q3 --> R["steps run one at a time; stop() drops the current step; finish() clears the whole queue"]
$('#box').stop();             // stop the CURRENT animation; leave the rest of the queue
$('#box').stop(true);         // stop current AND clear the queued animations
$('#box').stop(true, true);   // clear queue AND jump the current one to its end state
$('#box').finish();           // stop everything and jump ALL queued animations to their end
$('#box').delay(1000).fadeIn();          // insert a 1s pause between queued effects

Global switches:

jQuery.fx.off = true;         // disable all animation: effects jump straight to the end
jQuery.fx.interval = 16;      // ms between animation frames (default ~13)
jQuery.fx.speeds.slow;        // 600  -- the named-duration table (editable)

Setting jQuery.fx.off is how you honour a user’s prefers-reduced-motion preference globally.

Modern equivalent

CSS transitions and @keyframes animations handle most show/hide/slide/fade effects with no JavaScript — toggle a class and let the stylesheet animate. For scripted control use the Web Animations API (el.animate(keyframes, options)), which returns a controllable Animation object. See Transitions, Animations & Keyframes, and Animations via JavaScript.