jQuery jQuery.fx.off Property
Last Updated :
11 Jul, 2023
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.
html
<!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>
$(document).ready(function () {
$("#disable").click(function () {
jQuery.fx.off = true;
});
$("#toggle").click(function () {
$("div").toggle("slow");
});
});
</script>
</center>
</body>
</html>
|
Output: 
Example 2:This example uses jQuery.fx.off property to disable and enable animation.
html
<!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>
$(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>
|
Output:
Share your thoughts in the comments
Please Login to comment...