Effects & Animation
jQuery bundles a handful of common animations — fading, sliding, showing and hiding — as single method calls, so you don't have to hand-write the CSS transitions and timing yourself.
Show and hide
JS app.js
$("#panel").hide();
$("#panel").show(400);
Result
#panel disappears instantly, then reappears by smoothly growing back to its normal size and opacity over 400 milliseconds — passing a duration to .show()/.hide() animates the change instead of snapping it.Fading
JS app.js
$("#panel").fadeOut(300);
$("#panel").fadeIn(300);
Result
#panel fades to fully transparent over 300ms, then fades back to fully visible over another 300ms — the element stays in the page's layout the whole time, just becoming invisible rather than being removed.Sliding
JS app.js
$("#details").slideToggle();
Result
If
#details is currently visible, it collapses upward and out of view, animating its height down to zero — a common pattern for expandable "show more" sections. Calling slideToggle() again reverses it, sliding back open.Note: animation calls made on the same element queue up rather than running together —
$("#panel").fadeOut().fadeIn() runs the fade-out completely first, then starts the fade-in, not both at once. If you need to interrupt a queued animation (say, a user hovers on and off quickly), call .stop() first to clear the queue before starting a new animation, or you'll see a backlog of animations play out one after another.