jQuery Effect slideDown() Method

Quiz

The slideDown() method in jQuery is used to display selected elements by animating them with a sliding motion from top to bottom. It is commonly used to add a smooth visual effect when revealing content that was previously hidden.

Note: This method works on elements that are hidden using jQuery functions or have the CSS property "display:none", but it does not work on elements hidden with visibility:hidden.

To slide-up the elements (to hide), we need to use the slideUp() method.

Syntax

Following is the syntax of slideDown() method in jQuery −

$(selector).slideDown(speed,easing,callback)

Parameters

This method accepts the following optional parameters −

speed (optional): A string or number determining how long the animation will run. Default value is 400 milliseconds. Possible values are: milliseconds, slow, fast.
easing (optional): A string indicating which easing function to use for the transition. Default value is "swing". Possible values are: swing, linear.
callback (optional): A function to be executed once the animation is complete.

Example 1

In the following example, we are using the slideDown() method on the <div> element −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $("#btn-slide").click(function(){
      $("#panel").slideDown();
    });
  });
</script>
</head>
<body>

<button id="btn-slide">Slide Down</button>
<div id="panel" style="display: none;">
  <p>This is some hidden content that will slide down when the button is clicked.</p>
</div>
</body>
</html>

When we click on the button "Slide Down", the <div> element will slide down.

Example 2

In this example, we are sliding down the <div> element with a duration of 1000 milliseconds and linear easing −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $("#btn-slide").click(function(){
      $("#panel").slideDown(1000, "linear");
    });
  });
</script>
</head>
<body>

<button id="btn-slide">Slide Down</button>
<div id="panel" style="display: none;">
  <p>This is some hidden content that will slide down with a custom duration and easing.</p>
</div>
</body>
</html>

When we click on the button "Slide Down", the <div> element will slide down over a duration of 1 second.

Example 3

In this example, we are also passing the callback function to the jQuery slideDown() method −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $("#btn-slide").click(function(){
      $("#panel").slideDown(500, function(){
        alert("Slide down animation completed"); // Alert when slide down animation completes
      });
    });
  });
</script>
</head>
<body>

<button id="btn-slide">Slide Down</button>
<div id="panel" style="display: none;">
  <p>This is some hidden content that will slide down. An alert will pop up after the animation completes.</p>
</div>
</body>
</html>

When we click on the button, the <div> element will slide down smoothly from the top of the panel.After the slide down animation completes, an alert will pop up with the message "Slide down animation completed".

jquery_ref_effects.htm

Print Page