jQuery.fx.off


jQuery.fx.offReturns: Boolean

Description: Globally disable all animations.

  • version added: 1.3jQuery.fx.off

When this property is set to true, all animation methods will immediately set elements to their final state when called, rather than displaying an effect. This may be desirable for a couple reasons:

  • jQuery is being used on a low-resource device.
  • Users are encountering accessibility problems with the animations.

Animations can be turned back on by setting the property to false.

Example:

Toggle animation on and off

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.fx.off demo</title>
<style>
div {
width: 50px;
height: 30px;
margin: 5px;
float: left;
background: green;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
</head>
<body>
<input type="button" value="Run">
<button>Toggle fx</button>
<div></div>
<script>
var toggleFx = function() {
$.fx.off = !$.fx.off;
};
toggleFx();
$( "button" ).on( "click", toggleFx );
$( "input" ).on( "click", function() {
$( "div" ).toggle( "slow" );
} );
</script>
</body>
</html>

Demo: