How slideDown() function works in jQuery event handler ? ❤️

The jQuery function slideDown() creates some effect reacting to some event handler. It displays hidden content with some effect of dropping the content downwards. The other related functions are slideUp() and slideToggle(). These functions also work in the same way as the slideDown() function works with different effects.

Syntax:

$('selector').slideDown();

$('selector').slideDown(speed, callbackFunction);

Note: The values of speed can be slow, fast, or any fixed ms. The callback function can also be added if necessary. And to make the effect initially, the content should have the display property as none.

Example 1: Let us see how the slideDown() function works in jQuery with some examples.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
 
    <!-- Including jQuery  -->
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js"
        integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
            crossorigin="anonymous">
        </script>
 
    <style>
        h1 {
            color: #006600;
        }
 
        body {
            text-align: center;
        }
 
        #slider {
            text-align: center;
            padding: 5px;
            border: 2px solid black;
            color: #006600;
        }
 
        #GFG {
            padding: 5px;
            border: 2px solid black;
            background-color: #006600;
            font-size: xx-large;
            color: whitesmoke;
            height: auto;
            display: none;
        }
    </style>
</head>
 
<body>
    <h1> Beginner for Beginner</h1>
 
    <p></p>
 
    <div id="slider">
        ENTER MOUSE TO SEE THE SLIDEDOWN EFFECT
    </div>
 
    <div id="GFG">
        Beginner for Beginner
    </div>
 
    <script>
        $(document).ready(function () {
            $('#slider').mouseenter(function () {
                $('#GFG').slideDown('slow');
            })
        });
    </script>
</body>
</html>

Output:

Example 2: The following example demonstrates the jQuery mouseenter() and mouseleave() events.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
    <!-- Including jQuery  -->
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js"
        integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
            crossorigin="anonymous">
        </script>
 
    <style>
        h1 {
            color: #006600;
        }
 
        body {
            text-align: center;
        }
 
        #slider {
            text-align: center;
            padding: 5px;
            border: 2px solid black;
            color: #006600;
 
        }
 
        #GFG {
            padding: 5px;
            border: 2px solid black;
            background-color: #006600;
            font-size: xx-large;
            color: whitesmoke;
            height: auto;
            display: none;
        }
    </style>
</head>
 
<body>
    <h1> Beginner for Beginner</h1>
 
    <div id="slider">
        ENTER AND LEAVE MOUSE TO
        SEE THE SLIDEDOWN EFFECT
    </div>
 
    <div id="GFG">
        Beginner for Beginner
    </div>
 
    <script>
        $(document).ready(function () {
            $('#slider').mouseenter(function () {
                $('#GFG').slideDown('slow');
            })
            $('#slider').mouseleave(function () {
                $('#GFG').slideDown('slow');
                $('#GFG').css({
                    'background-color': 'yellow',
                    'color': '#006600'
                });
            })
        });
    </script>
</body>
</html>

Output:

Example 3: We can also add the slideDown() method for an image. We can place an image in the div click event.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
 
    <!-- Including jQuery  -->
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js"
        integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
        crossorigin="anonymous">
    </script>
 
    <style>
        h1 {
            color: #006600;
        }
 
        body {
            text-align: center;
        }
 
        #slider {
            text-align: center;
            padding: 5px;
            border: 2px solid black;
            color: #006600;
        }
 
        #GFG {
            padding: 5px;
            border: 2px solid black;
            height: auto;
            display: none;
        }
    </style>
</head>
 
<body>
    <h1> Beginner for Beginner</h1>
 
    <div id="slider">
        CLICK TO SEE THE SLIDEDOWN EFFECT
    </div>
 
    <div id="GFG">
 
        <!-- Image added using img tag with src attribute -->
        <img src=
"https://write.w3wiki.net/static/media/Group%20210.08204759.svg">
        <img>
    </div>
 
    <script>
        $(document).ready(function () {
            $('#slider').click(function () {
                $('#GFG').slideDown('slow');
            })
        });
    </script>
</body>
</html>

Output:

How slideDown() function works in jQuery event handler ?

HTML

HTML

HTML

Contact Us