In this tutorial, you will learn what is jQuery slideDown method and how to use this method with HTML elements.
jQuery slideDown Animation Effect Method
slideDown() is a method in the jQuery library that provides an animation effect for showing elements by sliding them down into view. It’s typically used to reveal hidden content on a webpage in a smooth and visually appealing manner.
The basic syntax of the slideDown() method is as follows:
$(selector).slideDown();
$(selector).slideDown(speed, callback);
$(selector).slideDown(speed, easing, callback);
Parameters of slideDown 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.
jQuery SlideDown() example
In the below example you can see that slideDown() method effect.
<!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>
In this above example of slideDown() method, you can see that slideDown() effect on html elements.
SlideDown () and callback example
<!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>
In this above example of slideDown() method with callback, you can see that slideDown() effect with callback on html elements.
Recommended jQuery Tutorial
- jQuery Text Method By Example
- Get and Set Input, Select box, Text, radio Value jQuery
- Duplicate Html Elements Using jQuery By Example
- jQuery | Event MouseUp By Example
- Event jQuery Mouseleave By Example
- jQuery Event Mouseenter Example
- Event jQuery MouseOver & MouseOut By Example
- keyup jquery event example
- Jquery Click Event Method with E.g.
- Event jQuery. Blur By Example
- jQuery form submit event with example
- keydown function jQuery
- List of jQuery Events Handling Methods with examples
- Jquery Selector by .class | name | #id | Elements
- How to Get the Current Page URL in jQuery
- jQuery Ajax Get() Method Example
- get radio button checked value jquery by id, name, class
- jQuery Set & Get innerWidth & innerHeight Of Html Elements
- jQuery Get Data Text, Id, Attribute Value By Example
- Set data attribute value jquery
- select multiple class in jquery
- How to Remove Attribute Of Html Elements In jQuery
- How to Checked Unchecked Checkbox Using jQuery
- jQuery removeClass & addClass On Button Click By E.g.
- To Remove whitespace From String using jQuery
- jQuery Ajax Post Method Example
- jQuery Ajax Get Method Example
- To Load/Render html Page in div Using jQuery Ajax $.load
- jQuery Sibling Methods – To Find Siblings Elements
- jQuery Find Siblings Elements with Class, id
