Introduction:

In this article, we will explain how to use slideDown() effect in jQuery with example .

Description:
To display a html element using slide down effect,  slideDown() method can be used.

Syntax:

$(selector).slideDown(speed);  
$(selector).slideDown(speed, callback);   
$(selector).slideDown(speed, easing, callback); 

 

speed: It specifies the speed of the delay. Its possible vales are slow, fast and milliseconds.

easing: It specifies the easing function to be used for transition.

callback: It is also an optional parameter. It specifies the function to be called after completion of slideDown() effect.

Let's take an example to demonstrate jQuery slideDown() effect.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Example of jQuery slideDown method</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script>
        $(document).ready(function () {
            $("#flip").click(function () {
                $("#panel").slideDown("slow");
            });
        });
    </script>
    <style>
        #panel, #flip {
            padding: 5px;
            text-align: center;
            background-color: #ffdd00;
            border: solid 1px #c3c3c3;
            width: 590px;
        }
 
        #panel {
            padding: 50px;
            display: none;
            background-color: #ffae00;
            width: 500px;
        }
    </style>
</head>
<body>
    <div id="flip">Click to slide down panel</div>
    <div id="panel">
        Hello sqltutorialspoint.com!
        It is the best tutorial website to learn jQuery and other languages.
    </div>
 
</body>
</html>

 Let's check live example

comments


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

You may also like