Open In App
Related Articles

jQuery jQuery.fx.off Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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.

html

<!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: jquery-59

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

html

<!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:

jquery-60



Last Updated : 11 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads