Global Animation Settings
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>
</head>
<body>
<div id="box" style="width:100px">Box</div>
<script>
jQuery.fx.off = true;
$("#box").animate({width: "300px"});
</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>
</head>
<body>
<div id="box" style="width:100px">Box</div>
<script>
jQuery.fx.off = false;
$("#box").animate({width: "300px"});
</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>
</head>
<body>
<div id="box">Box</div>
<script>
$("#box").fadeOut(5000);
</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>
</head>
<body>
<script>
const disableAnimations = true;
jQuery.fx.off = disableAnimations;
</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>
</head>
<body>
<script>
const prefersReduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
jQuery.fx.off = prefersReduced;
</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: