jQuery Effects - SlideUp

jQuery Effects - SlideUp: Learn about the jQuery slideUp() method, how it works, and its example.
Submitted by Pratishtha Saxena, on September 24, 2022

jQuery slideUp() Method

Sliding the content creates an interactive dynamic visual for the users. Sliding up the elements will help to have a clearer picture of the whole content on the webpage. If all the content is visible then it creates confusion for the user to understand it better. Therefore, the user can hide the content accordingly whatever is not useful. A part of the content can be set to slide up when the user clicks on the title of the content. This will make that particular content hidden only when it is clicked or when the user does not want to see it.

Therefore, the jQuery method - slideUp() helps to slide the selected element in the upwards direction. This method works when the element is visible on the page initially. This method does not set the selected element as hidden but makes it not visible to the user.

slideUp() Method Syntax

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

The speed, easing, and callback are the parameters its takes. They all are optional, i.e., they can be passed but not necessarily. The speed here indicates the speed of the elements that have to be slid up and hidden. It can be specified as – slow, fast, normal, or even in milliseconds. The default value of the speed is normal. The easing parameter takes - swing, linear as its values. The callback refers to the function which gets called when the slideUp() method finishes its task.

Let's see the following example for a better understanding of the slideUp() method in jQuery. When the button given is clicked by the user, it makes some content slide up on the page and makes it visible.

jQuery slideUp() Method Example

<!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">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
</head>
<body>
    <h2>jQuery Effects - SlideUp</h2>
    <p>Click the button to slide up the content on the page.</p>
    <button>Slide Up</button>
    <hr>
    <h3>THIS CONTENT IS VISIBLE NOW !!!</h3>
</body>

  
  <script type="text/javascript">
$(document).ready(function() {
    $('button').click(function() {
        $('h3').slideUp('slow');
    })
});
  </script>
</html>

Output:

jQuery - Effects: SlideDown

jQuery Effects - SlideToggle

Comments and Discussions!

Load comments ↻