jQuery Effect: Toggle animation on and off

Last update on August 19 2022 21:51:35 (UTC/GMT +8 hours)

jQuery Effect : Exercise-12 with Solution

Toggle animation on and off.
Sample Data :

HTML code:

<button id="enable">(Enable) jQuery.fx.off = false)</button>  
<button id="disable">(Disable) jQuery.fx.off = true)</button>
<br><br>
<button id="toggle">Toggle animation</button>
<div style="background:#98bf21;height:100px;width:100px;margin:50px;"></div>

Solution:

HTML Code:

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
  <title>Toggle animation on and off</title>
</head>
<body>
<button id="enable">(Enable) jQuery.fx.off = false)</button>  
<button id="disable">(Disable) jQuery.fx.off = true)</button>
<br><br>
<button id="toggle">Toggle animation</button>
<div style="background:#98bf21;height:100px;width:100px;margin:50px;"></div>  
</body>
</html>

JavaScript Code :


$("#enable").click(function(){
        jQuery.fx.off = false;
    }); 

$("#disable").click(function(){
        jQuery.fx.off = true;
    });
 
 $("#toggle").click(function(){
        $("div").toggle("slow");
    });

Note :
In jQuery jQuery.fx.off is used to disable all animations globally.

When this property is set to true, all animation methods will immediately set elements to their final state when called, rather than displaying an effect.
Animations can be turned back on by setting the property to false.

Live Demo:

See the Pen jquery-effect-exercise-12 by w3resource (@w3resource) on CodePen.

Contribute your code and comments through Disqus.

Previous: Run an animation with less frames.
Next: Animates all hidden elements to show slowly.