jQuery slideDown() method is used to gradually make the selected element appear on an html page with the slide down effect.
jQuery slideDown() Syntax
$(selector).slideDown(speed, callback_function);
$(selector) is to select the html element.
speed in milliseconds or “slow” or “fast” to adjust the speed of slide down effect. It is an optional parameter.
callback_function is also an optional parameter and it executes when the slide down effect is complete.
jQuery slideDown() example
In the following example we are applying the slide down effect on the paragraph, we have selected the paragraph using id selector.
The paragraph is initially set to display none but once the h2 heading is clicked, the paragraph slowly appears on the screen with a slide down transition.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("h2").click(function(){
$("#para").slideDown("slow");
});
});
</script>
</head>
<body>
<h2>jQuery slideDown effect example, Click here</h2>
<p id = "para" style="display:none;">This tutorial is published on beginnersbook.com. This
para is not initially visible, when we click on the h2 heading then this para is visible</p>
</body>
</html>
Output:
Before the h2 heading is clicked:
After the h2 heading is clicked:
jQuery slideDown() example with speed and callback parameters
We can have a callback function declared inside slideDown() method as a parameter. Lets take the same example that we have seen above, just change the script part. Here we are setting up an alert message using callback function, this executes when the slide down effect completes.
$(document).ready(function(){
$("h2").click(function(){
$("#para").slideDown("slow", function(){
alert("The paragraph is now visible");
});
});
});
Output:
