jQuery slideDown() Method

jQuery slideDown() method perform sliding down motion effect to display the selected elements. The slideDown() method animates the height of the selected elements.

Syntax

This syntax represent to the slideDown() method

$(selector).slideDown( duration, easing, callback );
Parameter Type Description
duration Number
String		 Required. Accept string or number that determining how long the slide effect will run.
default value is 400
Accepted values:
  • Predefined duration ("slow", "normal", "fast")
  • number of milliseconds (3000, 1000)
easing String Optional. Specifies the which easing function to use for the transition.
default value is "swing"
Accepted values:
  • "swing" - elements moves slows at the starting and ending, but faster in the middle
  • "linear" - elements moves in a constant speed
callback Function Optional. A function to call once the the slide effect is complete.

Example

Here, in this example show slideDown() effect on selected elements when click on button.

<!DOCTYPE html>
<html>
<head>
  <title>jQuery slideDown() method</title>
  <script src="jquery-latest.min.js"></script>
  <script>
    $(document).ready(function() {
      $("#click").click(function(){
        $("#slide").slideDown("slow");
      });
    });
  </script>
  <style type="text/css"> 
    #slide, #click {
      font-family: Verdana;
      font-size: 14px;
      background: #CCCCCC;
      border: 1px solid #c3c3c3;
      text-align: center;
    }
    #slide {
      display: none;
      height: 60px;
    }
  </style>
</head>
<body> 
  <div id="slide">
    <p>This paragraph text represent slide panel text and it's running slide effect.</p>
  </div>
  <p id="click">Click me to slide down</p>
</body> 
</html>

Run it...   »