Updated June 2, 2023
Introduction to jQuery slideUp()
This article is about jQuery’s in-built method slideUp(). We will see its functionality and how we can use it in our web pages. jQuery provides a wide range of functions or methods to handle events, DOM manipulation, and traversal, slideUp() is one of them. The method provides the functionality to animate the view of an HTML element sliding upwards and disappearing.
The method works by manipulating the display property of the element. When the height of the element shrinks to 0 or min-height, the display property is set to none. The elements underneath, appear to be moving up. The sliding motion looks smooth and interactive from the UI (user interface) perspective.
Syntax and Parameters of jQuery slideUp()
Following are the syntax and parameters of jQuery slideUp().
Syntax:
$(selector).slideUp (duration, easing, callback)Parameters:
The method signature includes three parameters:
1. Duration
- Determines the time span of sliding up animation
- Optional
- Datatype: Number or String
- Values possible: time in milliseconds, ‘slow’ and ‘fast’
- Default value: 400ms
2. Easing
- Specifies the transition speed of the animation
- Optional
- Datatype: String
- Values possible: ‘swing’ and ‘linear’
- Default value: ‘swing’
3. Callback
- Function to be called after the execution of the slideUp method
- Optional
Examples of jQuery slideUp()
Now, let’s try out some examples to see how we can use the method to create a sliding effect.
Example #1
In the below example, we used jQuery selectors with the slideUp() method.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script>
$(document).ready( function() {
$(".btn").click( function() {
$("p").slideUp();
});
});
</script>
</head>
<body>
<p> This is a paragraph. </p>
<button class = "btn"> Slide up</button>
</body>
</html>Output:
In the above example, there is an HTML element paragraph and a button with the class name ‘btn’. Using jQuery selectors, the button is matched with the class name and the paragraph with <p> tag. On the button click, a function will be called which in turn will execute the slideUp() method on the paragraph. Therefore, the paragraph starts disappearing while sliding upwards.
Example #2
In the below example, we will pass the speed parameter and use it to increase or decrease the transition time.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script>
$(document).ready( function() {
$(".btn").click( function() {
$("#image").slideUp("slow");
});
});
</script>
</head>
<body>
<img id = "image" src = "https://picsum.photos/id/237/200/300" width = "200"
height = "200"/>
<button class="btn"> Slide up </button>
</body>
</html>Output:
We have used “slow” as a speed parameter in the code. Slow indicates the transition time of 600 milliseconds. In the code, we have applied. slideUp(“slow”) on an image. When we click on the Slide Up button, the image appears to be moving up and ceases to be visible in 600 milliseconds.
We can try to change the speed parameter from slow to fast, we will observe that the image disappears in 200 milliseconds which is indicated by value ‘fast’. Also, we can pass a number of milliseconds as speed.
Example #3
We will exercise an example to use the easing parameter.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready( function() {
$("#slide").click( function() {
$("#block").slideUp("slow", "linear");
});
});
</script>
<style>
#slide, #block {
padding : 5px;
text-align : center;
background-color : #eee;
border : solid 1px #222;
}
#block {
padding : 50px;
}
</style>
</head>
<body>
<div id="slide"> Click to slide up block </div>
<div id="block"> Introduction to jQuery slideUp() </div>
</body>
</html>Output:
As we know, the default value for easing is ‘swing’. From the above code, we are trying to learn how the motion differs on passing ‘linear’. On clicking the slide up the block, we note that there is a minute difference in the transition motion.
Now, the motion is constant or uniform during the transition because the easing value is changed to linear.
Example #4
In this example, we are going to call a callback function after the slideUp() method is executed. We can achieve it bypassing the callback function to be executed, as a parameter to slideUp(callback) function. As the parameters are optional, it is not mandatory to pass the other two. Hence, the default values will be set for duration and easing.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> jQuery slideUp with callback </title>
<style>
.box{
width : 500px;
background : lightpink;
border : 1px solid #eee;
}
.inner-box{
padding: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
function alertCallback() {
alert(' Alert : The callback function is called ');
}
$(document).ready(function () {
$(".slide-up").click(function () {
$(".box").slideUp( alertCallback );
});
});
</script>
</head>
<body>
<button type="button" class="slide-up"> Slide Up </button>
<hr>
<div class="box">
<div class="inner-box"> jQuery provides a wide range of functions or methods to handle events, DOM manipulation and traversal, slideUp() is one of them. The method provides functionality to animate the view of an HTML element sliding upwards and disappearing. </div>
</div>
</body>
</html>Output:
In the page body, we are having one paragraph with dummy text and a button to carry out slide up operation on click. In the script part, we have one defined a function named alertCallback which is passed as a callback to the slideUp event. The function creates an alert with a message using JavaScript’s alert() method. Let’s hit the SlideUp button.
After clicking on the button, the paragraph slides up and becomes invisible. Soon after it, the alert box pops up with the provided message. That means the callback function is executed after the slideUp method’s execution finishes.
Conclusion
We have learned about jQuery’s slideUp method, its syntax and exercised various examples with different parameter values to gain expertise on it. Surely, it is easy to implement and we can use this method in designing appealing user interfaces.
Recommended Articles
This is a guide to jQuery slideUp(). Here we discuss the syntax, parameters of the signature method and various examples of f jQuery slideUp() with code implementation. You may also look at the following articles to learn more –
