Open In App

jQuery slideUp() Method

Improve
Improve
Like Article
Like
Save
Share
Report

The slideUp() is an inbuilt method in jQuery which is used to hide the selected elements. 

Syntax:

$(selector).slideUp(speed);

Parameter: It accepts an optional parameter “speed” which specifies the speed of the duration of the effect. 

jQuery examples to show the working of slideUp() method:
Example 1: In the code below, no parameter is passed to this method. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </script>
    <!--jQuery code to show the working of this method-->
    <script>
            $(document).ready(function () {
                $(".btn1").click(function () {
                    $("p").slideUp();
                });
            });
    </script>
    <style>
        div {
            width: 300px;
            height: 100px;
            padding: 20px;
            border: 2px solid green;
        }
    </style>
</head>
  
<body>
    <div>
        <p>This paragraph will get hide.</p>
        <!-- click on this button -->
        <button class="btn1">Slide up</button>
    </div>
</body>
  
</html>


Output:

 

Example 2: In the below code, speeding parameter is passed to this method. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </script>
    <!--jQuery code to show the working of this method-->
    <script>
            $(document).ready(function () {
                $(".btn1").click(function () {
                    $("p").slideUp(3000);
                });
            });
    </script>
    <style>
        div {
            width: 300px;
            height: 100px;
            padding: 20px;
            border: 2px solid green;
        }
    </style>
</head>
  
<body>
    <div>
        <p>This paragraph will get hide.</p>
        <!-- click on this button -->
        <button class="btn1">Slide up</button>
    </div>
</body>
  
</html>


Output:

 



Last Updated : 18 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads