jQuery slideDown method to show the hidden elements sliding down

jQuery slideDown method to show the selected hidden elements sliding down

In jQuery, slideDown method is used to show or visible the selected (hidden) elements in the web page.

jquery slideDown syntax

$(selector).slideDown(speed of animation, easing, callback function)

In jQuery all the three parameters are optional for slideDown method.

Speed of animation

"fast" - shows the element faster.

"normal" - shows the element in normal.

"slow" - shows the element slower.

milliseconds - shows the element animation as based on specified milliseconds.


"swing" - In middle of the animation is faster but slower in beginning and end of animation.

"linear" - Animation is consistent from beginning to end.

jQuery slideDown method example to show the selected elements

This jQuery code is used to show all the div elements in the page and displays the alert message 'Slide down method is completed testing!' once shown the div element.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <meta charset="utf-8" />
    <title>jQuery slideDown method</title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btnSlideDown').click(function () {
                $("div").slideDown(15000, "swing", function () {
                    alert("Slide down method is completed testing!")
    <input type="button" id="btnSlideDown" value="Slide Down"/>
    <div style="height:200px;width:200px;background-color:blue;color:white;display:none;">
        div element slide down testing!

hidden div element

hidden div element

Hides div after clicking on Fade Out button

shown the div after clicking on Slide Down button
shown the div after clicking on Slide Down button

jQuery slideDown with callback function

callback function is used to display the alert message once shown when clicking on Slide Down button.

        $(document).ready(function () {
            $('#btnSlideDown').click(function () {
                $("div").slideDown(function () {
                   alert('callback function!');

Shows the div element for 10000 milliseconds, animation mode is swing (In middle of animation is faster) and callback function is used to display alert message once div element is shown.

        $(document).ready(function () {
            $('#btnSlideDown').click(function () {
                $("div").slideDown(10000,"swing", function () {
                    alert('slideDown example!')

Privacy Policy  |  Copyrightcopyright symbol2020 - All Rights Reserved.  |  Contact us   |  Report website issues in Github   |  Facebook page   |  Google+ page

Email Facebook Google LinkedIn Twitter