Learn jQuery: Effects
In this course, you will learn how to use jQuery Effects to add animations to your HTML elements.
Start
Key Concepts
Review core concepts you need to learn to master this subject
jquery slideToggle method
jquery fadeIn effect method
jquery fadeOut effect method
jquery show effect
jquery toggle effect
jquery effects
jquery fadeToggle method
jquery slideUp method
jquery slideToggle method
jquery slideToggle method
// The '#menu' element will alternate between
// gradually sliding down and gradually sliding up
// every time the '#menu-button' is clicked.
$('#menu-button').on('click', () => {
$('#menu').slideToggle();
});The jQuery .slideToggle() effect method combines the effects of the .slideDown() and .slideUp() methods. This causes the element to alternate between gradually appearing by sliding down and gradually disappearing by sliding up every time the event listener is triggered.
The .slideToggle() method takes an optional parameter that specifies the duration of the effect. If not specified, the default value is 400 milliseconds.
What you'll create
Portfolio projects that showcase your new skills
How you'll master it
Stress-test your knowledge with quizzes that help commit syntax to memory
Learn jQuery: Effects
Start