How to disable jQuery animation ?
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= </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> |
Output:
Please Login to comment...