Global Animation Settings
In this page:
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>
</head>
<body>
<div id="box" style="width:100px">Box</div>
<script>
jQuery.fx.off = true;
$("#box").animate({width: "300px"});
</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>
</head>
<body>
<div id="box" style="width:100px">Box</div>
<script>
jQuery.fx.off = false;
$("#box").animate({width: "300px"});
</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>
</head>
<body>
<div id="box">Box</div>
<script>
$("#box").fadeOut(5000);
</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>
</head>
<body>
<script>
const disableAnimations = true;
jQuery.fx.off = disableAnimations;
</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>
</head>
<body>
<script>
const prefersReduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
jQuery.fx.off = prefersReduced;
</script>
</body>
</html>Chapter Quiz — Complete all 9 topics to unlock
0/9 topics done
Complete these topics first: