Effects & Animations

Introduction

jQuery made animation trivial long before CSS transitions were widespread. With one method call you can fade an element in, slide a panel down, or animate any numeric CSS property. These effects are why jQuery felt magical in its heyday.

Theory

Show / hide

• .hide() / .show() — instantly (or over a duration) toggle display.
• .toggle() — show if hidden, hide if visible.

Fading

• .fadeIn() / .fadeOut() — animate opacity.
• .fadeToggle(), .fadeTo(duration, opacity).

Sliding

• .slideDown() / .slideUp() — animate height.
• .slideToggle().

Custom animation & timing

.animate({ properties }, duration, callback) tweens numeric CSS properties:

$('#box').animate({ left: '+=120', opacity: 0.5 }, 400, function () {
  // runs when the animation finishes
});

Most effects accept a duration in ms (or 'slow'/'fast') and a completion callback.

Real World Example — Interactive Demo

The buttons below drive the blue box with real jQuery effects:

$('#fadeBtn').on('click',  () => $('#fxBox').fadeToggle(300));
$('#slideBtn').on('click', () => $('#fxBox').slideToggle(300));
$('#animBtn').on('click',  () => $('#fxBox').animate({ marginLeft: '+=80' }, 300));

Common Mistakes

• Animating non-numeric properties. .animate() only tweens numeric values (px, %, opacity) — not color without a plugin.
• Queue build-up. Rapid repeated calls stack in the animation queue; use .stop() before starting a new one.
• Forgetting effects are asynchronous. Code after an effect runs immediately — put follow-up logic in the completion callback.
• Using JS effects where CSS would be smoother. For simple hover/transition states, prefer CSS.

Best Practices

• Use .stop(true, true) on hover-driven animations to prevent queue pile-up.
• Keep durations short (200–400ms) so the UI feels responsive.
• Use callbacks (or chaining) to sequence dependent animations.
• Prefer CSS transitions for simple state changes; reserve .animate() for dynamic, JS-driven values.

Practice Exercise

1. Create a box and three buttons: fade toggle, slide toggle, and show/hide.
2. Wire each button to the matching jQuery effect with a 300ms duration.
3. Add a completion callback to one effect that updates a status line.
4. Use .animate() to move the box 100px to the right.

Assignment

Build a collapsible FAQ:

1. Several question headings, each followed by a hidden answer panel.
2. Clicking a question uses .slideToggle() to reveal/hide its answer.
3. When one opens, slide the others closed (use .siblings() + .slideUp()).
4. Add a subtle .fadeIn() on the answer's text for polish.

Interview Questions

• What does .fadeToggle() do? — Fades the element in if hidden, out if visible, by animating opacity.
• How do you run code after an animation completes? — Pass a completion callback as the last argument.
• What can .animate() animate? — Numeric CSS properties (positions, sizes, opacity); colors need a plugin.
• How do you prevent animation queue build-up? — Call .stop() (often .stop(true, true)) before the next animation.
• When should you use CSS over jQuery effects? — For simple, declarative transitions; CSS is typically more performant.

Additional Resources

• api.jquery.com/category/effects — all effect methods
• api.jquery.com/animate — the .animate() reference
• learn.jquery.com/effects — the official effects guide