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.
jquery fadeIn effect method
jquery fadeIn effect 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 .fadeIn() effect method causes a hidden element to gradually appear on the page. The method takes optional parameters.
The first optional parameter specifies the duration of the fading effect. The default value is 400 milliseconds.
The second parameter specifies the name of an “easing” function that determines the speed of the fading effect at different points in the animation. The default value is ‘swing’, where the fade-in effect is slower at the beginning/end and faster in the middle.
jquery fadeOut effect method
jquery fadeOut effect 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 .fadeOut() effect method causes an element and the space it was occupying to gradually disappear from the page. The method takes optional parameters.
The first optional parameter specifies the duration of the fading effect. The default value is 400 milliseconds.
The second parameter specifies an “easing” function that determines the speed of the fading effect at different points in the animation. The default value is ‘swing’, where the fade-out effect is slower at the beginning/end and faster in the middle.
jquery show effect
jquery show effect
// 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 .show() effect method causes an element, assuming it is hidden, to instantly appear on the page.
jquery toggle effect
jquery toggle effect
// 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 .toggle() effect method combines the effects of the .hide() and .show() methods. Every time the event listener is triggered, the element will alternate between displayed on the page and hidden from the page.
jquery effects
jquery effects
// 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();
});jQuery Effects are jQuery object methods used to add animation and dynamic behavior to page elements. Effects can be used to show or hide elements, fade elements in and out, and more.
jquery fadeToggle method
jquery fadeToggle 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 .fadeToggle() effect method combines the effects of the .fadeIn() and .fadeOut() methods. The element will alternate between gradually disappearing and appearing every time the event listener is triggered. This method takes optional parameters.
The first optional parameter specifies the duration of the fading effect. The default value is 400 milliseconds.
The second parameter specifies the name of an “easing” function that determines the speed of the fading effect at different points in the animation. The default value is ‘swing’, where the fading effect is slower at the beginning/end and faster in the middle.
jquery slideUp method
jquery slideUp 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 .slideUp() effect method causes an element and the space it was occupying to gradually disappear from the page by sliding up its content.
This method takes an optional parameter that specifies the duration of the effect in milliseconds. If not specified, the default duration is 400 milliseconds.
jquery hide effect
jquery hide effect
// 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 .hide() effect method causes an element and the space it was occupying to disappear instantly from the page. When executed, the browser will render the HTML as if the hidden element does not exist.
jquery slideDown method
jquery slideDown 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 .slideDown() effect method causes a hidden element to gradually appear on the page by sliding down its content.
This method takes an optional parameter that specifies the duration of the effect in milliseconds. If not specified, the default value of 400 milliseconds is used.
- 1jQuery Effects are a group of methods in the jQuery library that are responsible for adding dynamic behavior to websites. You may have seen many of these effects on modern websites without even rea…
- 6Great work! With fade, our website is starting to look dynamic. .fadeToggle() is the third and final method in this trio of fade methods. This method is similar to .toggle(). If you call .fadeToggl…
- 8Wow! You’ve completed this table of 9 different jQuery effects. Great job! To review, the methods that we learned were: * .hide() * .show() * .toggle() These methods instantly hide or show eleme…
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