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

📖 Theory

The schedule that ate the page

FestConnect's schedule table now lists 40 events, and visitors scroll past a wall of rows to reach the register button. The committee's wish list:

• the schedule folds away and unfolds on a tap
• the "few seats left!" alert fades in, waits, fades out
• nothing jumps; everything moves smoothly

In BCA305-01 you toggled style.display: instant, jarring. jQuery ships animated effects as one-liners, in 3 families.

📊 At a glance

The 3 effect families (+ the brake)

✏️ Formula

One signature fits all

$(selector).effect(speed, callback)

• speed (optional): "slow", "fast", or milliseconds (400 is the default feel)
• callback (optional): a function that runs after the effect finishes

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

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

Every toggle variant decides direction by the element's current state: 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

The idea that breaks intuition: effects do not block

Read this pair:

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

alert("gone!");

Intuition says: fade for 2 seconds, THEN alert. Wrong. jQuery starts the fade and moves on immediately; the alert fires while the element is still almost fully visible. Effects are asynchronous: they animate in the background while your code continues.

Anything that must happen after the motion belongs in the callback, the second argument, which jQuery invokes only when the animation completes. This async idea is the exact mental model AJAX will demand in Unit 4.

🧩 Quiz

$("#seatAlert").fadeOut(2000); alert("gone!"); When does the alert box appear?

1. After 2 seconds, once the fade completes
2. Immediately: the fade runs in the background while the code continues
3. Never: alert cannot follow an effect
4. After 2 seconds, but only if a callback is also supplied

💭 Think first

fadeTo: the odd one out

fadeTo(400, 0.5) sits in the fade family but behaves differently from fadeOut. Before tapping: what are its TWO differences?

⚠️ Watch out

The queue that would not stop

Effects on one element queue: that is what makes chaining (.fadeIn(800).fadeTo(400, 0.5)) run in order. The dark side: wave the mouse over a hover-animated card 10 times and 10 animations queue, replaying long after the mouse left.

The cure is stop() at the front: $(this).stop().slideToggle(300): kill the running animation, then start the fresh one. Exams ask what stop() is FOR; hover queue buildup is the answer they want.

📖 Theory

Motion is meaning

Use each family for what its motion SAYS: slide for things that occupy layout space (panels, schedules: the page visibly makes room), fade for overlays and alerts (attention, not layout), toggle variants for anything a button flips. And keep motions short: 300 to 600ms; a 3-second slide is a student loan of the user's patience. BCA402-02's UI/UX subject formalises this. Next lesson: reading and writing what is INSIDE elements: text(), html(), attr() and val().

✅ Summary

Key takeaways

• Three 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 runs AFTER completion.
• Effects are asynchronous: code after an effect runs immediately, not when it finishes.
• After-work goes in the callback: fadeOut(2000, function(){ ... }).
• Chaining queues effects on one selection, in order; stop() halts the current animation (hover-queue cure).
• fadeTo goes to a partial opacity and keeps the element in layout.
• Memory hook: effects start, code continues, callbacks finish.