Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

How slideDown() function works in jQuery event handler ?

  • Difficulty Level : Medium
  • Last Updated : 22 Jun, 2021

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  -->
        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> Geeks for Geeks</h1>
  
    <p></p>
  
    <div id="slider"
        ENTER MOUSE TO SEE THE SLIDEDOWN EFFECT 
    </div>
      
    <div id="GFG">
        Geeks for Geeks
    </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  -->
        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> Geeks for Geeks</h1>
  
    <div id="slider">
        ENTER AND LEAVE MOUSE TO 
        SEE THE SLIDEDOWN EFFECT
    </div>
      
    <div id="GFG">
        Geeks for Geeks
    </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 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  -->
        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> Geeks for Geeks</h1>
  
    <div id="slider">
        CLICK TO SEE THE SLIDEDOWN EFFECT
    </div>
      
    <div id="GFG">
  
        <!-- Image added using img tag with src attribute -->
        <img src=
        <img>
    </div>
  
    <script>
        $(document).ready(function () {
            $('#slider').click(function () {
                $('#GFG').slideDown('slow');
            })
        });
    </script>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :