jQuery jQuery.fx.off Property

Last Updated : 11 Jul, 2023

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=
"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> 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=
"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>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>