Tutorials › jQuery in Practice › Animations

Animations

4 min read Quiz at the end

Built-in effects include hide(), show(), fadeIn(), fadeOut(), slideDown(), and slideToggle(). Pass a duration in milliseconds or 'slow'/'fast'. Add a callback function that runs when the animation finishes.

Built-in Animations

$('#box').hide();
$('#box').show();
$('#box').toggle();
$('#box').fadeIn(500);
$('#box').fadeOut('slow');
$('#box').fadeToggle();
$('#box').slideDown(300);
$('#box').slideUp();
$('#box').slideToggle();

← Fetch with jQuery Deferred Next: Custom Animations →

Topic Quiz · 5 questions

Test your understanding before moving on

1. Which method shows a hidden element with fade?

💡 .fadeIn() shows a hidden element by gradually increasing its opacity.

2. Which method hides an element by sliding up?

💡 .slideUp() hides an element by sliding it upward.

3. What does .toggle() do?

💡 .toggle() shows the element if hidden, hides it if visible.

4. Which parameter controls animation speed?

💡 Animation speed accepts milliseconds (e.g. 500) or strings ('slow', 'fast').

5. What does .stop() do?

💡 .stop() stops the currently running animation on matched elements.

Quick Access

Animations

Built-in Animations

Test your understanding before moving on