w3resource
jquery exercises

jQuery Effect: Toggle animation on and off

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.

What is the difficulty level of this exercise?



New Content: Composer: Dependency manager for PHP, R Programming