jQuery slideUp() method is used to gradually disappear an html element with a slide up effect. You can think of it as a reverse of slideDown() method.
jQuery slideUp() Syntax
$(selector).slideUp(speed, callback_function);
$(selector): This is used to select the html element on which this slide up effect is being applied.
speed: To adjust the speed of the slide up effect. It can be in milliseconds or “slow” or “fast”.
callback_function: Optional parameter. It is a function that is passed as an argument to the slideUp() method, it executes when the slide up effect is complete.
jQuery slideUp() Example
In the following example, we are using the slide up effect on the paragraph. The paragraph is selected using jQuery id selector and we are calling a slideUp() method on this selector to make the paragraph disappear. All this is done inside h2 click function so this slide up effect takes place when we click on the h2 heading.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("h2").click(function(){
$("#para").slideUp("slow");
});
});
</script>
</head>
<body>
<h2>jQuery slideUp effect example, Click here</h2>
<p id = "para">This tutorial is published on beginnersbook.com. This
paragraph will disappear with a slide up effect once we click on the
h2 heading.</p>
</body>
</html>
Output:
Before h2 heading is clicked:
After h2 heading is clicked:
jQuery slideUp() method with speed and callback parameters
You can define a callback function as a parameter. Here we are making changes in the example that we have seen above, we have just defined a callback function as a slideUp() method parameter to display an alert message when the slide up effect is complete.
$(document).ready(function(){
$("h2").click(function(){
$("#para").slideUp("slow", function(){
alert("The paragraph is not visible now");
});
});
});
Output:
Leave a Reply