jQuery Effects: Show/Hide, Fade, Slide, Stop, Chaining, Callback

📖 Theory

schedule જે page ને ate કર્યું

FestConnect નું schedule table હવે 40 events ને lists કરે છે, અને visitors register button સુધી પહોંચવા માટે rows ની wall past scroll કરે છે. committee ની wish list:

• schedule tap પર folds away અને unfolds થાય છે
• "few seats left!" alert fade in થાય છે, wait કરે છે, fade out થાય છે
• કંઈ jump નથી; બધું smoothly move થાય છે

BCA305-01 માં તમે style.display ને toggled કર્યું: instant, jarring. jQuery animated effects ને one-liners તરીકે ships કરે છે, 3 families માં.

📊 At a glance

3 effect families (+ brake)

✏️ Formula

એક signature બધા માટે fits

$(selector).effect(speed, callback)

• speed (optional): "slow", "fast", અથવા milliseconds (400 default feel છે)
• callback (optional): function જે effect finishes થાય તે પછી runs થાય છે

$("#schedule").slideToggle(600);

$("#alert").fadeOut(2000, function() { ... });

દરેક toggle variant element ની current state દ્વારા direction decide કરે છે: visible folds, hidden unfolds.

⌨️ 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 ને breaks કરે છે: effects block નથી કરતા

આ pair ને read કરો:

$("#seatAlert").fadeOut(2000);

alert("gone!");

Intuition કહે છે: 2 seconds fade, પછી alert. Wrong. jQuery fade ને starts કરે છે અને immediately move on થાય છે; alert fire થાય છે જ્યારે element હજુ almost fully visible છે. Effects asynchronous છે: તેઓ background માં animate થાય છે જ્યારે તમારું code continue થાય છે.

કંઈ પણ જે motion પછી happen થવું જોઈએ તે callback માં belongs થાય છે, second argument, જે jQuery invoke કરે છે ફક્ત જ્યારે animation complete થાય છે. આ async idea એ exact mental model છે જે AJAX Unit 4 માં demand કરશે.

🧩 Quiz

$("#seatAlert").fadeOut(2000); alert("gone!"); alert box ક્યારે appear થાય છે?

1. 2 seconds પછી, once fade complete થાય
2. Immediately: fade background માં runs થાય છે જ્યારે code continue થાય છે
3. Never: alert effect ની પછી નથી આવી શકતું
4. 2 seconds પછી, પણ ફક્ત જો callback પણ supplied હોય

💭 Think first

fadeTo: odd one out

fadeTo(400, 0.5) fade family માં sits કરે છે પણ fadeOut થી differently behave કરે છે. tap કરતા પહેલાં: તેના TWO differences શું છે?

⚠️ Watch out

queue જે stop થતું નહોતું

એક element પર effects queue થાય છે: એ શું છે જે chaining (.fadeIn(800).fadeTo(400, 0.5)) ને order માં run કરવા દે છે. dark side: mouse ને hover-animated card પર 10 times wave કરો અને 10 animations queue થાય છે, mouse left થયા પછી long replay થાય છે.

cure એ stop() છે front પર: $(this).stop().slideToggle(300): running animation ને kill કરો, પછી fresh one ને start કરો. Exams પૂછે છે કે stop() શેના માટે FOR છે; hover queue buildup એ answer છે જે તેઓ want કરે છે.

📖 Theory

Motion એ meaning છે

દરેક family ને use કરો તેના motion માટે જે તે SAYS છે: slide layout space occupy કરતી things માટે (panels, schedules: page visibly makes room), fade overlays અને alerts માટે (attention, not layout), toggle variants કંઈ માટે જે button flips કરે છે. And motions ને short રાખો: 300 to 600ms; 3-second slide એ student loan છે user ની patience નો. BCA402-02 નો UI/UX subject તેને formalises કરે છે. Next lesson: reading અને writing શું element ની અંદર છે: 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 as slow/fast/milliseconds; callback AFTER completion પર runs થાય છે.
• Effects asynchronous છે: effect ની પછીનું code immediately runs થાય છે, જ્યારે તે finishes થાય ત્યારે નહીં.
• After-work callback માં goes થાય છે: fadeOut(2000, function(){ ... }).
• Chaining એક selection પર effects ને queue કરે છે, order માં; stop() current animation ને halts કરે છે (hover-queue cure).
• fadeTo partial opacity સુધી goes છે અને element ને layout માં keep કરે છે.
• Memory hook: effects start, code continues, callbacks finish.