jQuery.fx.off = true: Disable All Animations

Setting jQuery.fx.off to true globally disables all jQuery animations and transitions across an application. This article explains the exact behavior of this property, which methods it affects, the primary reasons developers implement it, and how to use it effectively in your code.

What jQuery.fx.off Does

By default, jQuery.fx.off is set to false. When changed to true, it immediately stops all animations from running smoothly over time. Instead, any jQuery animation method executed while this setting is active will immediately jump to the final CSS state.

Under the hood, jQuery bypasses the typical step-by-step timer-based animation loop and applies the target properties instantaneously (effectively treating duration as 0 milliseconds).

Affected Methods

Setting jQuery.fx.off = true affects all built-in jQuery effects, including:

  • Custom animations: .animate()
  • Fade effects: .fadeIn(), .fadeOut(), .fadeToggle(), .fadeTo()
  • Sliding effects: .slideDown(), .slideUp(), .slideToggle()
  • Basic display effects with durations: .show(speed), .hide(speed), .toggle(speed)

Common Use Cases

  1. Automated Testing: In continuous integration and testing environments (such as Jasmine, Jest, or QUnit), waiting for UI animations can slow down test suites and introduce race conditions. Turning animations off allows tests to evaluate DOM changes instantly.
  2. Accessibility (Reduced Motion): Users with vestibular disorders often configure their operating systems to minimize motion. You can detect the prefers-reduced-motion media query and set jQuery.fx.off = true to make the site immediately accessible.
  3. Performance Optimization: On underpowered hardware or legacy browsers, complex animations can cause severe frame drops and sluggish interfaces. Disabling animations improves overall responsiveness.

Code Example

To disable animations globally, set the property directly on the jQuery object:

// Disable all animations
jQuery.fx.off = true;

// This will now reveal the element instantly without a sliding transition
$("#banner").slideDown(1000);

// To re-enable animations later
jQuery.fx.off = false;

To automatically disable animations for users who prefer reduced motion:

if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
  jQuery.fx.off = true;
}