Tutorialspoint.dev

jQuery | slideUp() with Examples

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.

Return Value: It does not return anything simply it hides the selected element.

jQuery code to show the working of slideUp() method:

Code #1:
In the code below, no parameter is passed to this method.

<html>
  
<head>
    <script 
    </script>
    <script>
        <!-- jQuery code to show the working of this method -->
        $(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 :
In the below video, working of this method has been shown.

div style="width: 506px;" class="wp-video">

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

<!DOCTYPE html>
<html>
  
<head>
    <script 
    </script>
    <script>
        <!-- jQuery code to show the working of this method -->
        $(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 :
In the below video, the working of this method has been shown.



This article is attributed to GeeksforGeeks.org

You Might Also Like

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter