Black friday

Save big!

All courses under $5 - for a limited time!

Code has been added to clipboard!

Using jQuery .slideDown() Explained With Examples

Reading time 1 min
Published Jan 16, 2018
Updated Oct 2, 2019

jQuery slideDown: Main Tips

  • The .slideDown() method shows the element with a jQuery slide down animation.
  • It belongs to a bigger group of jQuery slide effects.
  • To learn how to make a slide up animation to hide an element, visit this tutorial.

Creating a Sliding Animation

The jQuery .slideDown() method shows the element with a slide down animation. This function can display elements hidden with the jQuery .hide() or .slideUp().

In the example below, a hover event reveals a hidden logo:

Example
$("button").hover(() => {
    $("img").slideDown();
});

The syntax for jQuery .slideDown() is as follows:

$("selector").slideDown(length, easing, callback);

jQuery .slideDown() takes three arguments:

  • length defines how many milliseconds does the animation last. 400 by default. Keywords slow (600 ms) or fast (200 ms) can be used as well.
  • easing indicates whether the speed of the animation should be linear or swing (default value).
  • callback names a function that will run after the animation ends.

Note: jQuery .slideDown() doesn't affect elements that have their CSS style visibility set to none.