jQuery Effect - slideDown() Method

Example

Display the hidden <p> element in a sliding manner:

$(".btn2").click(function(){
  $("p").slideDown();
});

Try it yourself

Definition and Usage

The slideDown() method displays hidden selected elements using a sliding effect.

Syntax

$(selector).slideDown(speed,callback)
Parameters Description
speed

Optional. Specify the speed of the element from hidden to visible (or vice versa). The default is "normal".

Possible values:

  • Milliseconds (e.g., 1500)
  • "slow"
  • "normal"
  • "fast"

In the case of setting the speed, the element will gradually change its height during the process from hidden to visible.

callback

Optional. The function to be executed after the slideDown function is executed.

For more information about callback, please visit our jQuery Callback chapter.

This parameter cannot be set unless the speed parameter is set.

Tips and Notes

Tip:If the element is already completely visible, this effect does not produce any change unless a callback function is specified.

Note:This effect is applicable to elements hidden by jQuery, or elements declared with display:none in CSS (but not applicable to elements with visibility:hidden).

More examples

Use the speed parameter
Use the speed parameter to hide and show elements.