ग्लोबल Animation सेटिंग्स
In this page:
jQuery.fx.off = true;
jQuery.fx.interval = milliseconds;jQuery.fx.off
global jQuery.fx.off flag को true set करना animation skip करके सीधे final state पर jump कर देता है, जो testing के लिए या उन users के लिए उपयोगी है जो motion disabled चाहते हैं।
उदाहरण: jQuery.fx.off
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
#box { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
</style>
</head>
<body>
<div id="box" style="width:100px">Box</div>
<button id="btn">Animate</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#btn").on("click", function() {
jQuery.fx.off = true;
$("#box").animate({width: "300px"});
$("#output").text("jQuery.fx.off = true, so the width jumped instantly");
});
$("#resetBtn").on("click", function() {
$("#box").stop(true).css("width", "100px");
$("#output").text("");
});
</script>
</body>
</html>Animations को On करना
jQuery.fx.off को वापस false set करना page पर हर effect method के लिए normal animated behavior restore कर देता है, पहले चालू किया गया instant-jump behavior reverse करते हुए।
उदाहरण: Turning Animations On
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
#box { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
</style>
</head>
<body>
<div id="box" style="width:100px">Box</div>
<button id="btn">Animate</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#btn").on("click", function() {
jQuery.fx.off = false;
$("#box").animate({width: "300px"}, function() {
$("#output").text("jQuery.fx.off = false, so the width animated smoothly");
});
});
$("#resetBtn").on("click", function() {
$("#box").stop(true).css("width", "100px");
$("#output").text("");
});
</script>
</body>
</html>Custom Duration
किसी individual effect call को एक duration argument pass करना किसी global setting को छुए बिना सिर्फ उस एक animation के लिए default speed override कर देता है।
उदाहरण: Custom Duration
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
#box { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
</style>
</head>
<body>
<div id="box">Box</div>
<button id="btn">Fade Out (5s)</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#btn").on("click", function() {
$("#output").text("Fading out over 5 seconds...");
$("#box").fadeOut(5000, function() {
$("#output").text("Done");
});
});
$("#resetBtn").on("click", function() {
$("#box").stop(true, true).show();
$("#output").text("");
});
</script>
</body>
</html>Global Effects Setting
क्योंकि jQuery.fx.off पूरे page पर एक साथ हर animation को असर करता है, इसे जानबूझकर और कम मात्रा में set किया जाना चाहिए -- आमतौर पर किसी condition के आधार पर startup पर एक बार, normal इस्तेमाल के दौरान बार-बार toggle नहीं।
उदाहरण: Global Effects Setting
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
</style>
</head>
<body>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
function init() {
const disableAnimations = true;
jQuery.fx.off = disableAnimations;
}
init();
$("#resetBtn").click(function() {
$("#output").empty();
init();
});
</script>
</body>
</html>User Preferences का सम्मान करना
prefers-reduced-motion media query check करना और उसके अनुसार jQuery.fx.off set करना उन users का सम्मान करता है जिन्होंने अपने operating system को बताया है कि वे animated motion नहीं चाहते, एक ज़रूरी accessibility consideration।
उदाहरण: Respect User Preferences
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
</style>
</head>
<body>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
function init() {
const prefersReduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
jQuery.fx.off = prefersReduced;
}
init();
$("#resetBtn").click(function() {
$("#output").empty();
init();
});
</script>
</body>
</html>- debugging के लिए
jQuery.fx.off = trueset करना और इसे वापस बदलना भूल जाना, इसलिए page पर हर effect instantly अपनी end state पर jump कर जाता है। - यह उम्मीद करना कि
jQuery.fx.off = truecallbacks skip कर देगा; callbacks फिर भी चलते हैं, बस तुरंत। - एक call पर duration set करके हर call के लिए default speed बदलने की कोशिश करना, जबकि यह सिर्फ उस single effect पर लागू होता है।
Chapter Quiz — Complete all 9 topics to unlock
0/9 topics done
Complete these topics first: