How to disable jQuery animation ?

Last Updated : 06 Sep, 2021

In this article, we will see how to disable the animation effect using jQuery. To disable the animation effect, we use jQuery.fx.off property.

The jQuery.fx.off property is used to globally enable/disable all animations of a page. Its default value is false which is used to allow animation to run normally.

Syntax:

jQuery.fx.off = true|false;

Property Values:

true: It is used to specify that the animations should be disabled.
false: It is used to specifies that the animations should be enabled.

Approach: Here, first we will use div element to create a square box of size 100px. After creating the box, we use toggle() method to set the toggle animation on the <div> element. Also, we use jQuery.fx.off property to disable the toggle animation effect.

Example:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        How to disable jQuery animation? 
    </title> 
  
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
  
    <style> 
        .box { 
            background: green; 
            height: 100px; 
            width: 100px; 
            margin: 50px; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green;"> 
            GeeksforGeeks 
        </h1> 
  
        <h2>Disable jQuery Animation</h2> 
  
        <button id="disable"> 
            Disable the Animation 
        </button> 
  
        <button id="toggle"> 
            Toggle Animation 
        </button> 
  
        <div class="box"></div> 
  
        <script> 
            $(document).ready(function() { 
                $("#disable").click(function() { 
                    jQuery.fx.off = true; 
                }); 
  
                $("#toggle").click(function() { 
                    $("div").toggle("slow"); 
                }); 
            }); 
        </script> 
    </center> 
</body> 
  
</html>