Skip to content
Related Articles

Related Articles

jQuery | jQuery.fx.off Property
  • Last Updated : 28 Feb, 2019
GeeksforGeeks - Summer Carnival Banner

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

Syntax:

jQuery.fx.off = true|false;

Parameter: This event accepts two parameters as mentioned above and described below:

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

Example: This example uses jQuery.fx.off property to disable the animation.




<!DOCTYPE html>
<html>
  
<head
    <title>
        jQuery jQuery.fx.off property
    </title>
      
    <script src=
    </script>
      
    <style>
        .box {
            background:green;
            height:100px;
            width:100px;
            margin:50px;
        }
    </style>
</head
  
<body>
    <center>  
        <h1 style = "color:green;" >  
            GeeksForGeeks
        </h1>  
          
        <h2> jQuery.jQuery.fx.off property</h2>
          
        <button id="disable">
            jQuery.fx.off = true ( Disable )
        </button>
          
        <br><br>
          
        <button id="toggle">
            Toggle animation
        </button>
          
        <div class="box"></div>
          
        <!-- Script to use jQuery.fx.off property -->
        <script>
            $(document).ready(function() {
                $("#disable").click(function() {
                    jQuery.fx.off = true;
                });
                  
                $("#toggle").click(function() {
                    $("div").toggle("slow");
                });
            });
        </script>
    </center>
</body>
  
</html>  

Output:
Before click on the disable button:

After click on the disable button:



Example 2: This example uses jQuery.fx.off property to disable and enable animation.




<!DOCTYPE html>
<html>
  
<head
    <title>
        jQuery.jQuery.fx.off property
    </title>
      
    <script src=
    </script>
      
    <style>
        .box {
            background:green;
            height:100px;
            width:100px;
            margin:50px;
        }
    </style>
</head
  
<body>
    <center>  
        <h1 style = "color:green;" >  
            GeeksForGeeks
        </h1>  
          
        <h2>jQuery.jQuery.fx.off property</h2>
          
        <button id="disable">
            jQuery.fx.off = true ( Disable )
        </button>
            
        <button id="enable">
            jQuery.fx.off = false ( Enable )
        </button>
          
        <br><br>
          
        <button id="toggle">
            Toggle animation
        </button>
          
        <div class="box"></div>
          
        <!-- Script to use jQuery.fx.off property -->
        <script>
            $(document).ready(function(){
            $("#disable").click(function(){
                jQuery.fx.off = true;
            });
              
            $("#enable").click(function(){
                jQuery.fx.off = false;
            });
              
            $("#toggle").click(function(){
                $("div").toggle("slow");
            });
        });
        </script>
    </center>
</body>
  
</html>  

Output:
Using Both Disable and Enable Button:

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :