jQuery jQuery.fx.off Property

What is the jQuery.fx.off Property?

The jQuery.fx.off or $.fx.off property is a global switch that disables or enables all jQuery animations.

$("#disable").click(function() {
	jQuery.fx.off = true;       // disable animations
	$("#box").animate({ left: "250px" }, 1000);
});

Key Points

• The jQuery.fx.off property is a boolean (true or false).
• Default value is false, so animations run normally.
• When set to true, methods like .animate(), .fadeIn(), etc., skip the animation and complete instantly.
• Useful for reduced‑motion modes, performance testing, or environments where animations are not desired.

How the $.fx.off Property Works

Before executing any effect, jQuery checks jQuery.fx.off property. If its value is set to true, jQuery bypasses the animation queue and applies final styles immediately.

Syntax

jQuery.fx.off = true;   // disable animations
jQuery.fx.off = false;  // enable animations

Parameters

Example: Toggle Global Animation On/Off

This example demonstrates the jQuery.fx.off property to globally disable or enable all jQuery animations. Click "Disable Animations" to instantly turn off animations—affected animations will jump to their end state without transition. Use "Enable Animations" to restore normal animated behavior before starting a new animation.

$(function() {
	$("#start").click(function() {
		$("#box").stop(true).css("left", 0).animate({ left: "250px" }, 2000);
	});
	$("#disable").click(function() {
		jQuery.fx.off = true;      // disable all animations
		$("#box").stop(true).css("left", 0).animate({ left: "250px" }, 2000);
	});
	$("#enable").click(function() {
		jQuery.fx.off = false;      // enable all animations
	});
});