jQuery slideUp
jQuery slideUp() can be applied on HTML element to generate a sliding up effect. Usually, the initial state of the HTML element is visible, so that when slideUp effect is applied, the HTML slides up and disappears.
In this tutorial, you will learn about jQuery slideUp() method, its syntax and usage, with examples.
Syntax jQuery slideUp
Following is the syntax to use jQuery slideUp() function
1 jQuery slideUp Default
To slide up a selected HTML Element with default timing,
$("htmlElement").slideUp();
2 jQuery slideUp slowfast
You can also provide a “slow” or “fast” argument to the slideUp() method to make the sliding effect slow or fast respectively.
$("htmlElement").slideUp("slow");
$("htmlElement").slideUp("fast");
3 jQuery slideUp Time in milliseconds
To control the sliding speed precisely, you can provide time in milliseconds as the argument to jQuery slideUp() method.
$("htmlElement").slideUp(4000); // for 4000 milliseconds
4 jQuery slideUp Callback Function
You can also provide an optional callback function as second argument to slideUp(), to execute when the sliding effect is completed on the HTML element.
$("htmlElement").slideUp(4000, function(){
alert("Sliding is completed.")
});
Examples jQuery slideUp
The following examples help you understand the usage of jQuery slideUp() method.
1 Example Basic jQuery slideUp
Following is a simple example to show the usage of jQuery slideUp() function.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#slideUpBtn").click(function(){
$("#div1").slideUp();
});
});
</script>
</head>
<body>
<p>jQuery slideUp() example</p>
<button id="slideUpBtn">Click to slide up the below div</button><br><br>
<div id="div1" style="width:100%;height:80px;background-color:yellow;text-align:center;">
<a style="line-height:80px;">Learn jQuery slideUp</a>
</div>
</div>
</body>
</html>
2 Example jQuery slideUpslow, slideUpfast
“slow”, “fast” are two quick options that help you control the speed of the sliding effect.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#slideUpBtn").click(function(){
$("#div1").slideUp("slow");
$("#div2").slideUp("fast");
});
});
</script>
</head>
<body>
<p>jQuery slideUp() example</p>
<button id="slideUpBtn">Click to slide up the below div</button><br><br>
<div id="div1" style="width:100%;height:80px;background-color:yellow;text-align:center;">
<a style="line-height:80px;">Learn jQuery slideUp slow</a>
</div><br>
<div id="div2" style="width:100%;height:80px;background-color:yellow;text-align:center;">
<a style="line-height:80px;">Learn jQuery slideUp fast</a>
</div>
</div>
</body>
</html>
3 Example jQuery slideUptimeinmilliseconds
You can also control the sliding speed at the precision of milliseconds. Provide a value in milliseconds as first argument.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#slideUpBtn").click(function(){
$("#div1").slideUp(4000);
$("#div2").slideUp(1000);
});
});
</script>
</head>
<body>
<p>jQuery slideUp() example</p>
<button id="slideUpBtn">Click to slide up the below div</button><br><br>
<div id="div1" style="width:100%;height:80px;background-color:yellow;text-align:center;">
<a style="line-height:80px;">Learn jQuery slideUp - in 4000 milliseconds</a>
</div><br>
<div id="div2" style="width:100%;height:80px;background-color:yellow;text-align:center;">
<a style="line-height:80px;">Learn jQuery slideUp - in 1000 milliseconds</a>
</div>
</div>
</body>
</html>
4 Example jQuery slideUp with callback function
Callback function is an optional second argument. The callback function is called when the slide-up /slide-down effect is completed. In the following example, we have provided a callback function with alert statement inside the body. You can provide your own statements inside the callback function.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#slideUpBtn").click(function(){
$("#div1").slideUp(4000, function(){
alert("Sliding is done.");
});
});
});
</script>
</head>
<body>
<p>jQuery slideUp() example</p>
<button id="slideUpBtn">Click to slide up the below div</button><br><br>
<div id="div1" style="width:100%;height:80px;background-color:yellow;text-align:center;">
<a style="line-height:80px;">Learn jQuery slideUp with Callback function</a>
</div>
</div>
</body>
</html>
Conclusion
In this jQuery Tutorial, we have learnt jQuery slideUp() method : Syntax and Usage with examples.