jQuery Effects - SlideDown

jQuery Effects - SlideDown: Learn about the jQuery slideDown() method, how it works, and its example.
Submitted by Pratishtha Saxena, on September 24, 2022

jQuery slideDown() Method

Sliding the content will create an interactive dynamic visual for the user. These are the effects that make the page more eye-catching. Sliding the elements or the content will help to make the page look cleaner and less messy. A part of the content can be set to slide down when the user clicks on the title of the content. This will make that particular content visible only when it is clicked or when the user wants to see it.

Therefore, the jQuery method - slideDown() helps to slide the selected element in the downwards direction. This method works when the element is not visible on the page initially. This means that the element should have its CSS set to - display: none. This method will not work if the element is in a hidden state.

slideDown() Method Syntax

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

The speed, easing, and callback are the parameters its takes. They all are optional, i.e., they can be passed but not necessarily. The speed here indicates the speed of the elements that have to be slide down. It can be specified as – slow, fast, normal, or even in milliseconds. The default value of the speed is normal. The easing parameter takes – swing, linear as its values. The callback refers to the function which gets called when the slideDown() method finishes its task.

Let's see the following example for a better understanding of the slideDown() method in jQuery. When the button given is clicked by the user, it makes some content slide down on the page and make it visible.

jQuery slideDown() Method Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>
  
  <body>
    <h2>jQuery Effects - SlideDown</h2>
    <p>Click the button to slide down the content on the page.</p>
    <button>Slide Down</button>
    <hr>
    <h3 style="display: none;">THIS CONTENT IS VISIBLE NOW !!!</h3>
  </body>
  
  <script type="text/javascript">
    $(document).ready(function() {
        $('button').click(function() {
            $('h3').slideDown('slow');
        })
    });
  </script>
</html>

Output:

jQuery - Effects: FadeTo

jQuery Effects - SlideUp

Comments and Discussions!

Load comments ↻