jQuery slideDown()

jQuery allow the developers to create a sliding effect on elements, with the help of following slide methods:

  • slideDown()
  • slideUp()
  • slideToggle()

The slideDown() method is used to slide down the selected elements.

Example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
	$("#flip").click(function(){
    	$("#panel").slideDown();
	});
});
</script>
 
<style>
#panel, #flip {padding: 2px;text-align: center;background-color: yellow;border: solid 5px red;}
 
#panel {
	padding: 50px;
	display: none;
}
</style>
</head>
<body>
 
<div id="flip">Click me. There is a message for you. </div>
<div id="panel">HELLO! NICE TO SEE YOU.</div>
 
</body>
</html>

Try it

JS Bin on jsbin.com

The slideDown() method can also include some other parameters to add more animation to the sliding effect.

Syntax:

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

Speed:

  • Speed is an optional parameter that specifies the speed of the delay in sliding down the selected elements.
  • It can accept string values: “slow”, “fast”, or in milliseconds.
  • The default speed is 400 milliseconds.
  • On using “slow” keyword as the value for the speed parameter, the compiler take it as 600 milliseconds.
  • Similarly, on using “fast” keyword as the value for the speed parameter, the compiler take it as 200 milliseconds.

Callback:

  • Callback is also an optional parameter.
  • Callback is the function to be executed once the slideDown() method’s execution is complete.

 

Example:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
	$("#flip").click(function(){
    	$("#panel").slideDown(5000);
	});
});
</script>
 
<style>
#panel, #flip {
	padding: 4px; text-align: center; background-color: pink; border: solid 3px blue;
}
 
#panel {
	padding: 50px; display: none;
}
</style>
</head>
<body>
 
<div id="flip">Click me. There is a message for you. </div>
<div id="panel">HELLO! NICE TO SEE YOU.</div>
 
</body>
</html>

Try it

JS Bin on jsbin.com

Please Share