Theory
Schedule जिसने Page खा लिया
FestConnect का schedule table अब 40 events list करता है, और visitors register button तक पहुँचने के लिए rows की एक wall के आगे scroll करते हैं। Committee की wish list:
- schedule एक tap पर fold away होकर unfold हो
- "few seats left!" alert fade in हो, wait करे, fade out हो
- कुछ भी jump न करे; सब कुछ smoothly move करे
BCA305-01 में आपने style.display toggle किया: instant, jarring। jQuery animated effects को one-liners की तरह ship करता है, 3 families में।
At a glance
3 Effect Families (+ Brake)
| Family | Methods | Motion |
|---|---|---|
| Show/Hide | show(), hide(), toggle() | एक corner से grow/shrink |
| Fade | fadeIn(), fadeOut(), fadeToggle(), fadeTo(speed, opacity) | Opacity melt in या out होती है |
| Slide | slideDown(), slideUp(), slideToggle() | Vertically unrolls / rolls up |
| Brake | stop() | अभी running animation halt करता है |
Formula
एक Signature सबको Fit करता है
$(selector).effect(speed, callback)
- speed (optional):
"slow","fast", या milliseconds (400 default feel है) - callback (optional): एक function जो effect finish होने के बाद run होता है
$("#schedule").slideToggle(600);
$("#alert").fadeOut(2000, function() { ... });
हर toggle variant direction को element की current state से decide करता है: visible fold होता है, hidden unfold होता है।
Practical
Folding Schedule, Fading Alert (Complete Page)
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function() {
$("#foldBtn").click(function() {
$("#schedule").slideToggle(600); // fold or unfold
});
$("#seatAlert")
.fadeIn(800) // chaining: one selection,
.fadeTo(400, 0.5) // queued effects, in order
.fadeTo(400, 1.0);
$("#hideAlert").click(function() {
$("#seatAlert").fadeOut(2000, function() {
alert("Alert dismissed"); // callback: AFTER the fade
});
});
});
</script>
</head>
<body>
<button id="foldBtn">Schedule</button>
<div id="schedule">...40 rows of events...</div>
<p id="seatAlert" style="display:none">Few seats left for Garba Night!</p>
<button id="hideAlert">Dismiss</button>
</body>
</html>
This example runs in Gri-Learn on the web, where you can edit it and see the output.
Theory
वह Idea जो Intuition तोड़ती है: Effects Block नहीं करते
यह pair पढ़िए:
$("#seatAlert").fadeOut(2000);
alert("gone!");
Intuition कहती है: 2 seconds fade कीजिए, THEN alert। ग़लत। jQuery fade start करता है और तुरंत आगे बढ़ता है; alert तब fire होता है जब element अभी भी almost पूरी तरह visible है। Effects asynchronous हैं: वे background में animate होते हैं जबकि आपका code continue करता है।
जो कुछ भी motion के बाद होना ज़रूरी है वह callback में belong करता है, दूसरा argument, जिसे jQuery सिर्फ़ तभी invoke करता है जब animation complete हो। यह async idea exact वही mental model है जो Unit 4 में AJAX माँगेगा।
Quiz
$("#seatAlert").fadeOut(2000); alert("gone!"); Alert box कब appear होता है?
- 2 seconds बाद, fade complete होने के बाद
- Immediately: fade background में चलता है जबकि code continue करता है
- कभी नहीं: alert एक effect को follow नहीं कर सकता
- 2 seconds बाद, पर सिर्फ़ तभी अगर एक callback भी supplied हो
Show the answer
Immediately: fade background में चलता है जबकि code continue करता है
fadeOut एक animation START करता है और तुरंत return करता है; अगला statement wait नहीं करता, तो alert element के अभी भी screen पर होते हुए pop होता है: effects asynchronous हैं। Option A वह intuition है जिसे तोड़ने के लिए यह question exist करता है: sequential-दिखने वाला code, non-sequential timing। Fade के बाद genuinely alert करने के लिए, alert को callback के INSIDE move कीजिए: fadeOut(2000, function(){ alert("gone!"); })। Option D इसे muddle करता है: एक callback add करना अगले statement को delay नहीं करता; यह बस after-work को एक proper home देता है। यह model bank कीजिए; Unit 4 का AJAX servers के साथ same idea है।
Think first
fadeTo: Odd One Out
fadeTo(400, 0.5) fade family में बैठता है पर fadeOut से अलग behave करता है। Tap करने से पहले: इसके TWO differences क्या हैं?
Show the answer
1: यह partway पर रुकता है। fadeTo आपके दिए exact opacity तक animate करता है (0.5 = half-transparent), जबकि fadeOut हमेशा पूरी तरह invisible तक run होता है। 2: Element अपनी जगह रखता है। fadeOut element को view से हटाकर खत्म होता है (display none, layout close हो जाता है); fadeTo इसे present रखता है और space occupy करते हुए, बस translucent। यही वजह है listing seat alert को fadeTo 0.5 फिर 1.0 से pulse करती है: layout jumps के बिना attention। यह भी नोटिस कीजिए fadeTo का कोई toggle twin नहीं है और इसका speed argument compulsory है।
Watch out
वह Queue जो रुकती नहीं थी
एक element पर effects queue होते हैं: यही chaining (.fadeIn(800).fadeTo(400, 0.5)) को order में run कराता है। Dark side: एक hover-animated card पर mouse को 10 बार wave कीजिए और 10 animations queue हो जाते हैं, mouse के जाने के बहुत बाद replay होते हुए।
Cure front पर stop() है: $(this).stop().slideToggle(300): running animation kill कीजिए, फिर fresh वाला start कीजिए। Exams पूछते हैं stop() किसलिए है; hover queue buildup वह answer है जो वे चाहते हैं।
Theory
Motion ही Meaning है
हर family को उसके motion जो SAYS करता है उसके लिए इस्तेमाल कीजिए: layout space occupy करने वाली चीज़ों के लिए slide (panels, schedules: page visibly room बनाता है), overlays और alerts के लिए fade (attention, layout नहीं), किसी भी चीज़ के लिए toggle variants जिसे एक button flip करे। और motions को छोटा रखिए: 300 से 600ms; एक 3-second slide user के patience का एक student loan है। BCA402-02 का UI/UX subject इसे formalise करता है। अगला lesson: elements के INSIDE जो है उसे पढ़ना और लिखना: text(), html(), attr() और val()।
Summary
Key takeaways
- तीन families: show/hide/toggle (grow), fadeIn/fadeOut/fadeToggle/fadeTo (opacity), slideDown/slideUp/slideToggle (vertical roll)।
- Signature: effect(speed, callback): speed slow/fast/milliseconds की तरह; callback COMPLETION के बाद run होता है।
- Effects asynchronous हैं: एक effect के बाद code तुरंत run होता है, इसके finish होने पर नहीं।
- After-work callback में जाता है: fadeOut(2000, function(){ ... })।
- Chaining एक selection पर effects को order में queue करता है; stop() current animation halt करता है (hover-queue cure)।
- fadeTo एक partial opacity तक जाता है और element को layout में रखता है।
- Memory hook: effects start होते हैं, code continue करता है, callbacks finish करते हैं।