jQuery slideUp() Effect
The jQuery slideUp() method is used to slide up the selected element.
Syntax of slideUp() effect
$(selector).slideUp(speed, easing, callback) The selector is the element on which slideUp effect occurs. The optional speed parameter specifies either in milliseconds or a few predefined strings, slow and fast. The by default speed is 400 milliseconds. The easing parameter specifies the speed that the sliding should run at different points while sliding. jQuery supports two easing methods: linear and swing. The callback function is called after the sliding completion.
Example - slideUp with slow speed
<style>
.demobox {
width: 200px;
height: 150px;
background-color: #FFCCFF;
border: 4px solid black;
padding: 20px;
}
</style>
<div id="demo" class="demobox"> Hello World!</div>
<button id="btn">Start Sliding</button>
<script>
$(document).ready(function(){
$("button#btn").click(function() {
$("div#demo").slideUp('slow');
});
});
</script>Output of the above code
In the above example, when the user click on the 'Start Sliding' button, the div box of 'demo' id gets slide up.
Example - slideUp with time and linear easing
<style>
.demobox {
width: 200px;
height: 150px;
background-color: #99FF99;
border: 4px solid black;
padding: 20px;
}
</style>
<div id="demo1" class="demobox"> Hello World!</div>
<button id="btn1">Start Sliding</button>
<script>
$(document).ready(function(){
$("button#btn1").click(function() {
$("div#demo1").slideUp(800, "linear");
});
});
</script>Output of the above code
In the above example, when the user click on the 'Start Sliding' button, the div box of 'demo1' id gets slide up according to the given sliding speed and linear easing.
Example - slideUp with time, swing easing and callback function
<style>
.demobox {
width: 200px;
height: 150px;
background-color: #E5CCFF;
border: 4px solid black;
padding: 20px;
}
</style>
<div id="demo2" class="demobox"> Hello World!</div>
<button id="btn2">Start Sliding</button>
<script>
$(document).ready(function(){
$("button#btn2").click(function() {
$("div#demo2").slideUp(1000, "swing" , function(){
alert("The box has beed slide up");
});
});
</script>Output of the above code
In the above example, when the user click on the 'Start Sliding' button, the div box of 'demo2' id gets slide up according to the given sliding speed, swing easing and given function.
