jQuery jQuery.fx.off Property

What You’ll Learn

The jQuery.fx.off static property is a global on/off switch for every jQuery animation on the page. This tutorial covers how setting it to true makes effects jump to their final state instantly, reading the Boolean value, re-enabling with false, use cases for low-resource devices and accessibility or reduced motion, comparisons with jQuery.fx.interval, prefers-reduced-motion, and per-call duration: 0, and five hands-on examples from the official toggle demo to re-enabling smooth motion.

Introduction

When you call .animate(), .fadeIn(), or .slideToggle(), jQuery normally runs a tween that updates CSS over time. The global jQuery.fx.off property overrides that behavior for every effect on the page: when it is true, animation methods still execute their logic and callbacks, but durations become zero and elements snap to their end states immediately.

Added in jQuery 1.3, fx.off is the practical sibling to low-level timer tuning with jQuery.fx.interval. Where fx.interval adjusted how often ticks fired on legacy browsers, fx.off removes motion entirely. The official jQuery documentation recommends it for low-resource devices and for users who experience accessibility problems with animated UI. You can flip it at runtime — the canonical demo toggles $.fx.off with a button while a slow .toggle() on green boxes shows the difference.

Understanding the jQuery.fx.off Property

Per the official jQuery API, jQuery.fx.off globally disables all animations. It is a static property on the global jQuery.fx object — not a method you call on a jQuery collection like $(selector).fadeOut().

Read it to inspect whether effects are disabled; assign true or false to change global behavior. Because it applies page-wide, one assignment affects every subsequent effect method until you change it again. Callbacks, promises, and queue progression still run — only the visible tween is skipped.

📝 Syntax

One global Boolean property on jQuery.fx:

// Read whether animations are disabled - since jQuery 1.3
jQuery.fx.off
// Globally disable all jQuery effects (instant end states)
jQuery.fx.off = true
// Re-enable normal animation durations
jQuery.fx.off = false

Type and behavior

• Type: Boolean — true disables all effects; false enables them.
• Default: false — animations run with their configured durations.
• Scope: Global — one value shared by every jQuery animation on the page.

Version notes

• Added: jQuery 1.3
• Status: Stable — still documented and supported in current jQuery releases.
• Returns: Boolean when read — inspect before toggling in conditional logic.

Official jQuery API demo pattern

var toggleFx = function() {
  $.fx.off = !$.fx.off;
};
toggleFx();
$( "button" ).on( "click", toggleFx );
$( "input" ).on( "click", function() {
  $( "div" ).toggle( "slow" );
} );

Examples Gallery

Each example demonstrates a core jQuery.fx.off concept from the official toggle demo to re-enabling smooth motion. Open DevTools or use the Try-it links. Example 1 mirrors the demo on api.jquery.com/jQuery.fx.off/.

var toggleFx = function() {
  $.fx.off = !$.fx.off;
  $( "#fx-status" ).text(
    "jQuery.fx.off = " + $.fx.off
  );
};
toggleFx();
$( "#toggle-fx" ).on( "click", toggleFx );
$( "#run-toggle" ).on( "click", function() {
  $( ".fx-box" ).toggle( "slow" );
} );

fx.off false: div.toggle("slow") animates height/opacity over ~600 ms
fx.off true:  div.toggle("slow") snaps visible/hidden instantly
Toggle button flips $.fx.off each click

console.log( "Before:", jQuery.fx.off, typeof jQuery.fx.off );
jQuery.fx.off = !jQuery.fx.off;
console.log( "After toggle:", jQuery.fx.off );
$( "#log-state" ).on( "click", function() {
  var before = jQuery.fx.off;
  jQuery.fx.off = !before;
  $( "#state-output" ).html(
    "Before: " + before + " → After: " + jQuery.fx.off
  );
} );

Console: Before: false boolean
After toggle: true
UI: Before: false → After: true

$( "#run-off" ).on( "click", function() {
  jQuery.fx.off = true;
  $( "#fade-box" ).hide().fadeIn( 800 );
  $( "#move-box" )
    .css({ left: 0 })
    .animate({ left: 240 }, 800 );
  $( "#mode" ).text( "fx.off = true — instant end states" );
} );
$( "#run-on" ).on( "click", function() {
  jQuery.fx.off = false;
  $( "#fade-box" ).hide().fadeIn( 800 );
  $( "#move-box" )
    .css({ left: 0 })
    .animate({ left: 240 }, 800 );
  $( "#mode" ).text( "fx.off = false — smooth 800 ms tweens" );
} );

fx.off true:  fadeIn and animate complete in one frame (opacity 1, left 240px)
fx.off false: both tweens run over 800 ms with visible motion

var reducedMotion = window.matchMedia(
  "(prefers-reduced-motion: reduce)"
).matches;
if ( reducedMotion ) {
  jQuery.fx.off = true;
  $( "#a11y-note" ).text(
    "Reduced motion detected — jQuery.fx.off = true"
  );
}
$( "#simulate-reduced" ).on( "click", function() {
  jQuery.fx.off = true;
  $( "#a11y-note" ).text(
    "Simulated reduced motion — effects disabled globally"
  );
} );
$( "#panel-toggle" ).on( "click", function() {
  $( "#a11y-panel" ).slideToggle( "slow" );
} );

prefers-reduced-motion: reduce → fx.off true on load
slideToggle("slow") snaps open/closed with no slide animation
Simulate button sets fx.off true for testing without OS setting

jQuery.fx.off = true;
$( "#disable-all" ).on( "click", function() {
  jQuery.fx.off = true;
  $( "#restore-status" ).text( "Animations OFF" );
} );
$( "#enable-all" ).on( "click", function() {
  jQuery.fx.off = false;
  $( "#restore-status" ).text( "Animations ON" );
  $( "#restore-box" )
    .stop( true, true )
    .css({ left: 0, opacity: 0.3 })
    .animate({ left: 260, opacity: 1 }, 1200 );
} );

fx.off true:  Enable button sets false, then box slides smoothly over 1200 ms
fx.off false: animate runs with full duration and easing

🚀 Common Use Cases

• Low-resource devices — set jQuery.fx.off = true on older phones or embedded browsers where animation timers drain CPU and battery.
• Accessibility and reduced motion — honor prefers-reduced-motion: reduce by disabling jQuery effects globally for users sensitive to motion.
• Automated testing — skip animated waits in unit or integration tests by turning effects off so callbacks fire immediately.
• Debugging effect chains — isolate queue and callback logic without waiting for tweens to finish visually.
• Progressive enhancement toggle — expose a user setting that flips fx.off like the official demo’s Toggle fx button.
• Performance profiling — compare page behavior with and without jQuery motion to measure layout or script cost.

📝 Notes

• Added in jQuery 1.3 as a global Boolean property on jQuery.fx, not an instance method.
• Default value is false — animations run normally until you set true.
• Reading the property returns true or false — use it in conditionals before toggling.
• When true, all effect methods jump to final states instantly; durations and speed names like "slow" are ignored.
• Set jQuery.fx.off = false to re-enable smooth motion for every subsequent effect.
• One global flag for the entire page — not per-element, per-queue, or per-method.
• Does not disable CSS transitions or non-jQuery animation libraries — only jQuery’s fx engine.

💡 Best Practices