jQuery slideDown() Animation Example

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

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *