jQuery Api slideDown() Animation By Example

jQuery Animation slideDown() Method – how to use this method with html elements .Here you will learn how to create slide motion effect using jQuery.

jQuery slideDown Animation Effect

Using SlideDown () methods, HTML elements are used to gradually increase their height (i.e., sliding them down).

Syntax

 $(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.

Spread the love

Be First to Comment

Leave a Reply

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