jQuery Animation slideUp() Method; Through this tutorial, i am going to show you what is jQuery slideUp animation effect method and how to use this method with html elements.
jQuery SlideUp() Animation Method
Using SlideUp () methods, HTML elements are used to gradually decrase their height (i.e., sliding them up).
Syntax jQuery SlideUp() Animation Method
$(selector).slideUp();
$(selector).slideUp(speed, callback);
$(selector).slideUp(speed, easing, callback);
Parameters of jQuery SlideUp() Animation Method
- speed :- The argument ‘speed‘ determines the duration of this effect.
- easing :- It specifies the easing function to be used for transition.
- callback :- Ihis is an optional parameter. you can specify what to do after the slideUp() method is called.
Example 1 – jQuery SlideUp() Animation Method
See that slideUp() animation method effect; as shown below:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Slide Up</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn-up").click(function(){
$(".slideDiv").slideUp("slow")
});
});
</script>
<style>
.slideDiv
{
padding:5px;
text-align:center;
background-color:yellow;
border:solid 1px;
}
.slideDiv
{
padding:50px;
}
</style>
</head>
<body>
<button id="btn-up">Click Me to slide Up</button>
<div class="slideDiv"><b>Hello</b> <br><br>Thank for trying this</div>
</body>
</html>
Example 2 – jQuery SlideUp() Animation Method with callback
See that slideUp() animation method effect with callback; as shown below:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Slide Up</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn-up").click(function(){
$(".slideDiv").slideUp("slow", function(){
alert("The slideUp effect is completed.");
});
});
});
</script>
<style>
.slideDiv
{
padding:5px;
text-align:center;
background-color:yellow;
border:solid 1px;
}
.slideDiv
{
padding:50px;
}
</style>
</head>
<body>
<button id="btn-up">Click Me to slide Up</button>
<div class="slideDiv"><b>Hello</b> <br><br>Thank for trying this</div>
</body>
</html>
Recommended jQuery Tutorials
Recommended:-jQuery Detect ENTER key pressed
Recommended:-jQuery keyup() Event Method
Recommended:-jQuery MouseEnter Event Method
Recommended:-jQuery Trigger Mouseleave on Element
Recommended:-jQuery Hover Event Trigger Example
Recommended:-jQuery Trigger Mousedown Event Method
Recommended:-jQuery Trigger Mouseup Event Method
Recommended:-jQuery Mouseover & MouseOut Event Method
Recommended:-jQuery Animation Effect Methods
Recommended:-jQuery FadeIn Animation Example
Recommended:-Fade Out Animation jQuery
Recommended:-jQuery FadeToggle Animation Example
Recommended:-jQuery FadeTo Animation Example