jQuery jQuery.fx.off Property

Beginner
6 min read
Updated: Oct 2026
5 examples
Live preview
jQuery.fx.off — globally disable all jQuery animations with a Boolean switch
Definition

What Is jQuery.fx.off?

jQuery.fx.off (since jQuery 1.3) is a global Boolean that turns every jQuery animation on or off. When true, effect methods jump to the final state immediately. When false (default), durations and easing run normally.

Remember
jQuery.fx.off          // read → true or false
jQuery.fx.off = true;  // disable all effects (instant end)
jQuery.fx.off = false; // re-enable normal durations

// $.fx.off is the same property
// Callbacks still run — only the tween is skipped
NeedUse
Mute all jQuery motionjQuery.fx.off = true
Restore motionjQuery.fx.off = false
One-call instant effectduration 0 on that call only
Legacy tick rate (avoid)jQuery.fx.interval (deprecated)
Jump a running chain.finish()
Approach

How to Use jQuery.fx.off

Assign the Boolean, then call any effect method — it honors the flag at start time.

  1. Optionally read jQuery.fx.off to see the current state.
  2. Set true to disable (or false to enable).
  3. Call .fadeIn(), .animate(), .toggle("slow"), etc.
  4. With true, the element snaps to the end CSS; callbacks still fire.
  5. Set false anytime to restore smooth motion for later calls.
PieceRequired?Role
Type—Boolean
Default—false (animations on)
Scope—One global value for the whole page
Alias—$.fx.off === jQuery.fx.off

Pseudocode

Pseudocode
// Read / write
disabled = jQuery.fx.off
jQuery.fx.off = true | false

// When any effect method runs:
if jQuery.fx.off is true:
    apply end CSS immediately
    run complete / queue next (no tween frames)
else:
    animate over the requested duration

// Official toggle pattern:
$.fx.off = !$.fx.off
$("div").toggle("slow")
Reference

Cheat Sheet

Keep these facts handy when disabling or restoring jQuery effects.

TopicDetail
SyntaxjQuery.fx.off (read / write Boolean)
SincejQuery 1.3
Defaultfalse
StatusStable (not deprecated)
trueAll effects → instant end state
falseNormal durations / easing
CallbacksStill run when off
Use casesLow CPU · a11y · tests
Try it

Live Preview

Toggle fx.off, then run a slow fade. Watch snap vs smooth.

Panel — fade me after toggling fx.off.

Official pattern: flip the Boolean, then call an effect. true snaps; false animates.

Result
Ready — toggle fx.off, then fade.
Code

jQuery Examples

Short, copy-ready snippets. Open DevTools, or use Try It Yourself for a live editor.

Example 1 — Official Toggle Demo

Flip $.fx.off, then run .toggle("slow") — snap vs animate.

jQuery
var toggleFx = function () {
  $.fx.off = !$.fx.off;
  $("#status").text("jQuery.fx.off = " + $.fx.off);
};

toggleFx();
$("#toggle-fx").on("click", toggleFx);
$("#run").on("click", function () {
  $(".box").toggle("slow");
});
Try It Yourself

How It Works

  1. Flip. !$.fx.off toggles the global Boolean.
  2. Show state. Update a label so you can see the current value.
  3. Effect. .toggle("slow") checks fx.off when it starts.
  4. Result. Off → instant; on → slow animation.

Example 2 — Read the Boolean State

Inspect type and value before and after a toggle.

jQuery
$("#log").on("click", function () {
  var before = jQuery.fx.off;
  jQuery.fx.off = !before;
  $("#out").text(
    "Before: " + before + " (" + typeof before + ")\n" +
    "After: " + jQuery.fx.off
  );
});
Try It Yourself

How It Works

  1. Read. Access the static property — no method call.
  2. Type. Always a Boolean (unlike fx.interval’s Number).
  3. Toggle. Assign the negated value.
  4. Use. Branch on it in a11y or test setup code.

Example 3 — Instant vs Animated

Same fadeIn / animate calls — behavior depends only on fx.off.

jQuery
$("#run-off").on("click", function () {
  jQuery.fx.off = true;
  $("#fade").hide().fadeIn(800);
  $("#move").css({ marginLeft: 0 }).animate({ marginLeft: 160 }, 800);
  $("#mode").text("fx.off = true — instant end states");
});

$("#run-on").on("click", function () {
  jQuery.fx.off = false;
  $("#fade").hide().fadeIn(800);
  $("#move").css({ marginLeft: 0 }).animate({ marginLeft: 160 }, 800);
  $("#mode").text("fx.off = false — smooth 800 ms tweens");
});
Try It Yourself

How It Works

  1. Set flag. Assign before starting effects.
  2. Same API. Call signatures stay unchanged.
  3. Off path. Duration is treated as zero; end CSS applies now.
  4. On path. Normal tween over 800 ms.

Example 4 — Respect Reduced Motion

On load, set fx.off = true when the OS prefers less motion.

jQuery
var reduced = window.matchMedia(
  "(prefers-reduced-motion: reduce)"
).matches;

if (reduced) {
  jQuery.fx.off = true;
  $("#note").text("Reduced motion — jQuery.fx.off = true");
}

$("#simulate").on("click", function () {
  jQuery.fx.off = true;
  $("#note").text("Simulated reduced motion — effects off");
});

$("#panel-btn").on("click", function () {
  $("#panel").slideToggle("slow");
});
Try It Yourself

How It Works

  1. Detect. matchMedia reads the user’s motion preference.
  2. Map. Set fx.off = true so jQuery skips tweens.
  3. Test. A simulate button helps without changing OS settings.
  4. Note. CSS transitions are separate — disable those in CSS too if needed.

Example 5 — Re-enable Smooth Motion

Turn effects off for a test, then set false and animate again.

jQuery
$("#disable").on("click", function () {
  jQuery.fx.off = true;
  $("#status").text("Animations OFF");
});

$("#enable").on("click", function () {
  jQuery.fx.off = false;
  $("#status").text("Animations ON");
  $("#box")
    .stop(true, true)
    .css({ marginLeft: 0, opacity: 0.3 })
    .animate({ marginLeft: 160, opacity: 1 }, 1200);
});
Try It Yourself

How It Works

  1. Disable. Future effects snap until you change the flag.
  2. Enable. Assign false before starting a new tween.
  3. Animate. Normal duration and easing apply again.
  4. Stop first. Optional .stop(true, true) clears any leftover queue.

Edge Cases & Pitfalls

Watch these when muting jQuery motion globally.

global

Affects every jQuery effect on the page

There is no per-element fx.off. Use duration 0 for a single call instead.

callbacks

Complete still fires when off

Do not assume “no animation” means “no callback.” Logic after complete still runs.

CSS

Does not disable CSS transitions

Only jQuery’s fx engine is muted. Handle stylesheet motion separately for full reduced-motion support.

vs interval

Not the same as fx.interval

fx.off removes motion. fx.interval only tuned legacy tick rate (deprecated).

timing

Checked when the effect starts

Changing fx.off mid-tween does not rewrite an animation already in progress — set it before the call.

Compatibility

Browser Support

jQuery.fx.off has been part of jQuery since 1.3. It works in every browser that runs your loaded jQuery version — no separate browser feature flag.

✓ Stable · jQuery 1.3+

jQuery.fx.off

Supported across jQuery 1.3+, 2.x, and 3.x. Prefer a current jQuery 3.x build. Still the recommended global switch for disabling effects.

100% With jQuery
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
fx.off Universal

Bottom line: Safe for a11y and low-resource modes. Pair with prefers-reduced-motion, and remember it only controls jQuery effects — not CSS transitions.

Analysis

Performance Notes

ApproachCostBest for
fx.off = trueCheapestLow-resource devices, a11y, tests
Normal animationsTimer / rAF workDefault UX when motion is fine
Per-call duration: 0Cheap, localOne effect without muting the page

Turning effects off removes tween work entirely. That is exactly why the docs recommend it on constrained devices — and why tests often set it to skip waiting for animations.

Remember

Key Takeaways

  • Role: global on/off switch for all jQuery animations (since 1.3).
  • Call: jQuery.fx.off = true|false — Boolean, page-wide.
  • Behavior: true → instant end CSS; callbacks still run.
  • Use for: reduced motion, low CPU, and skipping waits in tests.

One line: jQuery.fx.off mutes every jQuery effect on the page — set true to snap, false to animate again.

Frequently Asked Questions

When set to true, jQuery.fx.off globally disables all jQuery animations. Effect methods such as .animate(), .fadeIn(), and .slideToggle() jump elements to their final state immediately instead of tweening. It is a static Boolean on jQuery.fx — not a method on a collection.
It was added in jQuery 1.3 and remains a stable global switch in current releases — unlike jQuery.fx.interval, which was deprecated in 3.0 and removed in 4.0.
A Boolean. true means all jQuery effects are disabled globally; false (the default) means durations and easing run normally.
Yes. Queue progression and complete callbacks still fire. Only the visible tween is skipped — the end CSS is applied in one step.
Assign jQuery.fx.off = false (or $.fx.off = false). Every subsequent effect uses normal durations again. You can toggle it at runtime.
Official use cases: low-resource devices where animation timers cost CPU, and users with accessibility / motion sensitivity. Pair with prefers-reduced-motion, or use it in tests to skip animated waits.

Next: jQuery.speed()

Normalize duration, easing, and complete into a standard options object for effects.

jQuery.speed() tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

10 people found this page helpful

jQuery jQuery.fx.interval Property jQuery jQuery.speed() Method