Effects and animation
Show, hide, fade and slide without fighting CSS transitions.
What you will be able to do
- Use .fadeIn, .fadeOut and .slideToggle.
- Pass a duration and a completion callback.
- Prefer CSS transitions for new code.
- Respect prefers-reduced-motion.
In plain English
jQuery effects animate inline styles with timers. CSS transitions and the Web Animations API are smoother and cheaper. Use jQuery effects only in existing code, and respect reduced motion.
const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches
$('#panel').slideToggle(reduce ? 0 : 200)Your turn
MediumRespect reduced motion
Use a duration of 0 when reduced motion is preferred, otherwise 200ms.
JAVASCRIPT · starter
$('#panel').slideToggle(200)Check your understanding before moving on.
Knowledge checkQuestion 1
Which properties are cheapest to animate?
Select an answer to continue
Study tools
Make it yours.
Keep a private note for this lesson, then turn the key ideas into flashcards you can revisit.
Sign in to save notes and flashcards.Both are private to your account and stay with your progress.
Sign inFinished reading?
Lock in what you just learned.
0%
Mark this lesson complete to save your place and move one step closer to the certificate.