jQuery Animation slideDown() Method; In this tutorial, i will show you what is jQuery slideDown animation effect and how to use this method with html elements.
jQuery slideDown() Animation Method
Using SlideDown () methods, HTML elements are used to gradually increase their height (i.e., sliding them down).
Syntax jQuery slideDown() Animation Method
$(selector).slideDown();
$(selector).slideDown(speed, callback);
$(selector).slideDown(speed, easing, callback);
Parameters of jQuery slideDown() Animation Method
- speed :- The argument ‘speed‘ determines the duration of this effect.
- easing :- It specifies the easing function to be used for transition.
- callback :- Ihis is an optional parameter. you can specify what to do after the slideDown() method is called.
Example 1 – jQuery slideDown() Animation Method
See the jQuery slideDown() animation method effect; as shown below:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Slide Down</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn-down").click(function(){
$(".slideDiv").slideDown("slow");
});
});
</script>
<style>
.slideDiv
{
padding:5px;
text-align:center;
background-color:yellow;
border:solid 1px;
}
.slideDiv
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<button id="btn-down">Click Me to slide down</button>
<div class="slideDiv"><b>Hello</b> <br><br>Thank for trying this</div>
</body>
</html>
Example 2 – jQuery slideDown() Animation Method with callback
See the jQuery slideDown() animation method effect with callback; as shown below:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Slide Down</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn-down").click(function(){
$(".slideDiv").slideDown("slow", function(){
alert("The slidedown effect is completed.");
});
});
});
</script>
<style>
.slideDiv
{
padding:5px;
text-align:center;
background-color:yellow;
border:solid 1px;
}
.slideDiv
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<button id="btn-down">Click Me to slide down</button>
<div class="slideDiv"><b>Hello</b> <br><br>Thank for trying this</div>
</body>
</html>
Recommended jQuery Tutorials
Recommended:-jQuery Keydown Event Example
Recommended:-jQuery Detect ENTER key pressed
Recommended:-jQuery keyup() Event Method
Recommended:-jQuery MouseEnter Event Method
Recommended:-jQuery Trigger Mouseleave on Element
Recommended:-jQuery Hover Event Trigger Example
Recommended:-jQuery Trigger Mousedown Event Method
Recommended:-jQuery Trigger Mouseup Event Method
Recommended:-jQuery Mouseover & MouseOut Event Method
Recommended:-jQuery Animation Effect Methods
Recommended:-jQuery FadeIn Animation Example
Recommended:-Fade Out Animation jQuery
Recommended:-jQuery FadeToggle Animation Example