Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Globally Disable Animation Using jQuery
In this article, we will learn to globally disable an animation using jQuery. In jQuery, animations are commonly used to create smooth transitions and effects. However, there might be scenarios where you want to disable animations globally, such as improving performance on low-powered devices or creating an instant response for user interactions.
Using jQuery.fx.off to Disable Animations
To globally disable an animation using jQuery, use the jQuery.fx.off() method, which can be set to true to disable all animations and effects. When this property is enabled, jQuery methods like .animate(), .fadeIn(), .fadeOut(), and .slideToggle() execute instantly without any animation.
To enable animation ?
$("#enable").click(function(){
jQuery.fx.off = false;
});
To disable animation, set jQuery.fx.off() as true ?
$("#disable").click(function(){
jQuery.fx.off = true;
});
Enabling and Disabling Animations Globally
The example demonstrates how to enable or disable animations globally using jQuery's jQuery.fx.off property. By clicking the Enable or Disable button, you can control whether animations should run smoothly or complete instantly.
-
Enable Button: Turns animations ON (jQuery.fx.off = false).
-
Disable Button: Turns animations OFF (jQuery.fx.off = true), making animations execute instantly.
-
GO Button: Moves the image forward (right) with animation.
- BACK Button: Moves the image backward (left) with animation.
- Uses .animate() to move an image horizontally.
Example
Below is an example to globally disable an animation using jQuery ?
<html>
<head>
<title>The jQuery Example</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script language = "javascript">
$(document).ready(function() {
$("#enable").click(function(){
jQuery.fx.off = false;
});
$("#disable").click(function(){
jQuery.fx.off = true;
});
$("#go").click(function(){
$(".target").animate({left: '+=200px'}, 2000);
});
$("#back").click(function(){
$(".target").animate({left: '-=200px'}, 200);
});
});
</script>
<style>
p {background-color:#bca; width:350px; border:1px solid green;}
div{position: absolute; left: 50px; top:300px;}
</style>
</head>
<body>
<p>Click enable or disable and then go or back button:</p>
<button id = "enable"> Enable</button>
<button id = "disable"> Disable </button>
<button id = "go"> GO</button>
<button id = "back"> BACK </button>
<div class = "target">
<img src = "./images/jquery.jpg" alt = "jQuery" />
</div>
</body>
</html>
Output
The go button will forward the animation and the back button will backward the animation?
Conclusion
Disabling animations globally in jQuery can be useful for performance optimization or user preferences. Using jQuery.fx.off, you can instantly turn off animations without modifying individual animation calls.
889 Views
