Global Animation Settings
Setting jQuery.fx.off to true disables jQuery animations.
In this page:
Syntax
jQuery.fx.off = true;
jQuery.fx.interval = milliseconds;jQuery.fx.off
Setting the global jQuery.fx.off flag to true skips animation and jumps straight to the final state, which is useful for testing or for users who want motion disabled.
Example: jQuery.fx.off
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
#box { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
</style>
</head>
<body>
<div id="box" style="width:100px">Box</div>
<button id="btn">Animate</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#btn").on("click", function() {
jQuery.fx.off = true;
$("#box").animate({width: "300px"});
$("#output").text("jQuery.fx.off = true, so the width jumped instantly");
});
$("#resetBtn").on("click", function() {
$("#box").stop(true).css("width", "100px");
$("#output").text("");
});
</script>
</body>
</html>Turning Animations On
Setting jQuery.fx.off back to false restores normal animated behavior for every effect method on the page, reversing the instant-jump behavior turned on earlier.
Example: Turning Animations On
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
#box { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
</style>
</head>
<body>
<div id="box" style="width:100px">Box</div>
<button id="btn">Animate</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#btn").on("click", function() {
jQuery.fx.off = false;
$("#box").animate({width: "300px"}, function() {
$("#output").text("jQuery.fx.off = false, so the width animated smoothly");
});
});
$("#resetBtn").on("click", function() {
$("#box").stop(true).css("width", "100px");
$("#output").text("");
});
</script>
</body>
</html>Custom Duration
Passing a duration argument to an individual effect call overrides the default speed for just that one animation, without needing to touch any global setting.
Example: Custom Duration
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
#box { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
</style>
</head>
<body>
<div id="box">Box</div>
<button id="btn">Fade Out (5s)</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#btn").on("click", function() {
$("#output").text("Fading out over 5 seconds...");
$("#box").fadeOut(5000, function() {
$("#output").text("Done");
});
});
$("#resetBtn").on("click", function() {
$("#box").stop(true, true).show();
$("#output").text("");
});
</script>
</body>
</html>Global Effects Setting
Because jQuery.fx.off affects every animation on the entire page at once, it should be set deliberately and sparingly -- typically once at startup based on a condition, not toggled repeatedly during normal use.
Example: Global Effects Setting
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
</style>
</head>
<body>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
function init() {
const disableAnimations = true;
jQuery.fx.off = disableAnimations;
}
init();
$("#resetBtn").click(function() {
$("#output").empty();
init();
});
</script>
</body>
</html>Respect User Preferences
Checking the prefers-reduced-motion media query and setting jQuery.fx.off accordingly respects users who have told their operating system they don't want animated motion, an important accessibility consideration.
Example: Respect User Preferences
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
</style>
</head>
<body>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
function init() {
const prefersReduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
jQuery.fx.off = prefersReduced;
}
init();
$("#resetBtn").click(function() {
$("#output").empty();
init();
});
</script>
</body>
</html>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
Common Mistakes
- Setting
jQuery.fx.off = truefor debugging and forgetting to turn it back, so every effect on the page jumps instantly to its end state. - Expecting
jQuery.fx.off = trueto skip callbacks; the callbacks still run, but immediately. - Trying to change the default speed for every call by setting a duration on one call, when it applies only to that single effect.
🔒
Chapter Quiz — Complete all 9 topics to unlock
0/9 topics done
Complete these topics first: