Using jQuery .slideDown() Explained With Examples

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:

$("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.