Codecademy Logo

Learn jQuery: Effects

jquery slideToggle method

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.

// 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 fadeIn effect method

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.

// The '#menu' element will gradually appear
// on the page when the '#menu-button' is clicked.
$('#menu-button').on('click', () => {
// equivalent to $('#menu').fadeIn(400, 'swing')
$('#menu').fadeIn();
});

jquery fadeOut effect method

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.

// The '#menu' element will gradually disappear from
// the page when the '#menu-button' is clicked.
$('#menu-button').on('click', () => {
// equivalent to $('#menu').fadeOut(400, 'swing')
$('#menu').fadeOut();
});

jquery show effect

The jQuery .show() effect method causes an element, assuming it is hidden, to instantly appear on the page.

//Instantly reveals the '#menu' element when the '#show-menu-button' is clicked.
$('#show-menu-button').on('click', () => {
$('#menu').show();
});

jquery toggle effect

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.

//The '#menu' element will alternate between being displayed and hidden every time the '#menu-button' is clicked.
$('#menu-button').on('click', () =>{
$('#menu').toggle();
});

jquery effects

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.

// The .show() effect causes the #menu element to
// appear once the #menu-button element is clicked.
$('#menu-button').on('click', event => {
$('#menu').show();
});

jquery fadeToggle method

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.

// The '#menu' element will alternate between
// gradually disappearing and gradually appearing
// on the page when the '#menu-button' is clicked.
$('#menu-button').on('click', () => {
// equivalent to $('#menu').fadeToggle(400, 'swing')
$('#menu').fadeToggle();
});

jquery slideUp method

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.

// The '#menu' element will gradually disappear
// from the page by sliding up its content when
// the '#menu-button' is clicked.
$('#menu-button').on('click', () => {
// slide up over half a second
$('#menu').slideUp(500);
});

jquery hide effect

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.

//The '#menu' element will disappear instantly from the page when the '#hide-menu-button' is clicked.
$('#hide-menu-button').on('click', () => {
$('#menu').hide();
});

jquery slideDown method

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.

// The '#menu' element will gradually appear on
// the page by sliding down its content when the
// '#menu-button' element is clicked.
$('#menu-button').on('click', () => {
// menu appears over 400ms duration
$('#menu').slideDown();
});

Learn more on Codecademy