![jQuery Tutorial](/jquery/images/jquery-mini-logo.jpg)
- jQuery Tutorial
- jQuery - Home
- jQuery - Overview
- jQuery - Basics
- jQuery - Syntax
- jQuery - Selectors
- jQuery - Events
- jQuery - Attributes
- jQuery - AJAX
- jQuery DOM Manipulation
- jQuery - DOM
- jQuery - Add Elements
- jQuery - Remove Elements
- jQuery - Replace Elements
- jQuery CSS Manipulation
- jQuery - CSS Classes
- jQuery - Dimensions
- jQuery - CSS Properties
- jQuery Traversing
- jQuery - Traversing
- jQuery - Traversing Ancestors
- jQuery - Traversing Descendants
- jQuery References
- jQuery - Selectors
- jQuery - Events
- jQuery - Effects
- jQuery - HTML/CSS
- jQuery - Traversing
- jQuery - Miscellaneous
- jQuery - Properties
- jQuery - Utilities
- jQuery Plugins
- jQuery - Plugins
- jQuery - PagePiling.js
- jQuery - Flickerplate.js
- jQuery - Multiscroll.js
- jQuery - Slidebar.js
- jQuery - Rowgrid.js
- jQuery - Alertify.js
- jQuery - Progressbar.js
- jQuery - Slideshow.js
- jQuery - Drawsvg.js
- jQuery - Tagsort.js
- jQuery - LogosDistort.js
- jQuery - Filer.js
- jQuery - Whatsnearby.js
- jQuery - Checkout.js
- jQuery - Blockrain.js
- jQuery - Producttour.js
- jQuery - Megadropdown.js
- jQuery - Weather.js
- jQuery Useful Resources
- jQuery - Questions and Answers
- jQuery - Quick Guide
- jQuery - Useful Resources
- jQuery - Discussion
jQuery Effect slideDown() Method
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".