jQuery jQuery.fx.off Property

Quiz

The jQuery.fx.off property in jQuery is used to globally disable or enable all jQuery animations. It is a boolean property. The default value is false, which means animations are enabled by default.

Setting this property to true will disable all animations, making them complete immediately.

Syntax

Following is the syntax of jQuery jQuery.fx.off Property −

jQuery.fx.off = true|false;

Parameters

Here is the description of the above syntax −

true: Disables all jQuery animations.
false: Enables all jQuery animations.

Example

This example demonstrates toggling animations on and off using "jQuery's jQuery.fx.off property" −

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#disable").click(function(){
    jQuery.fx.off = true;
    $("#animationStatus").text("Animations: Disabled");
  });
  $("#enable").click(function(){
    jQuery.fx.off = false;
    $("#animationStatus").text("Animations: Enabled");
  });
  $("#toggle").click(function(){
    $("div").toggle("slow");
  });
});
</script>
</head>
<body>
<button id="disable">Animations: Disable (jQuery.fx.off = true)</button>
<button id="enable">Animations: Enabled (jQuery.fx.off = false)</button>
<br><br>
<button id="toggle">Toggle animation</button>

<p id="animationStatus">Animations: Enabled</p>

<div style="background:#98bf21;height:100px;width:100px;margin:50px;"></div>
</body>
</html>

The 'Toggle animation' button toggles the visibility of a div with a slow animation effect. Clicking 'Disable' turns off animations globally, while clicking 'Enable' restores animations.

jquery_ref_properties.htm

Print Page