jQuery | jQuery.fx.off Property
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> |
chevron_right
filter_none
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> |
chevron_right
filter_none
Output:
Using Both Disable and Enable Button:
