jQuery slideDown() Effect Method

jQuery slideDown() Effect Method

jQuery Animation slideDown(); In this tutorial, you will learn what is jQuery slide down method and how to use this method with HTML elements.

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.

Recommended jQuery Tutorial

  1. jQuery Text Method By Example
  2. Get and Set Input, Select box, Text, radio Value jQuery
  3. Duplicate Html Elements Using jQuery By Example
  4. jQuery | Event MouseUp By Example
  5. Event jQuery Mouseleave By Example
  6. jQuery Event Mouseenter Example
  7. Event jQuery MouseOver & MouseOut By Example
  8. keyup jquery event example
  9. Jquery Click Event Method with E.g.
  10. Event jQuery. Blur By Example
  11. jQuery form submit event with example
  12. keydown function jQuery
  13. List of jQuery Events Handling Methods with examples
  14. Jquery Selector by .class | name | #id | Elements
  15. How to Get the Current Page URL in jQuery
  16. jQuery Ajax Get() Method Example
  17. get radio button checked value jquery by id, name, class
  18. jQuery Set & Get innerWidth & innerHeight Of Html Elements
  19. jQuery Get Data Text, Id, Attribute Value By Example
  20. Set data attribute value jquery
  21. select multiple class in jquery
  22. How to Remove Attribute Of Html Elements In jQuery
  23. How to Checked Unchecked Checkbox Using jQuery
  24. jQuery removeClass & addClass On Button Click By E.g.
  25. To Remove whitespace From String using jQuery
  26. jQuery Ajax Post Method Example
  27. jQuery Ajax Get Method Example
  28. To Load/Render html Page in div Using jQuery Ajax $.load
  29. jQuery Sibling Methods – To Find Siblings Elements
  30. jQuery Find Siblings Elements with Class, id

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

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