.slideUp()
Syntax
$(selector).slideUp([speed,] [easing,] [callback]);
Parameters
All three arguments are optional.
The speed, or duration of the animation, can be indicated as either a number (representing milliseconds) or as a string 'fast' or 'slow'.
duration (optional)- A string or number determining how long the animation will run
callback (optional)- A function to call once the animation is complete
Description
A 'fast' animation is 200 milliseconds whereas a 'slow' animation is 600 milliseconds.
If the speed (aka duration) is omitted, the default speed is 400 milliseconds.
$.slideUp() accepts a callback function, which is executed once the $.slideUp() function has finished executing.
Examples
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
text-align: center;
color: white;
font-size: xx-large;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 50px;
background-color: orange;
}
</style>
<script
src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function() {
$("div#message").click(function(e) {
e.stopPropagation();
$("div#message").slideUp('fast');
});
$(document).click(function() {
$("div#message").slideDown('fast');
});
});
</script>
</head>
<body>
<div id="message">This is a message.</div>
</body>
</html>
Click to slide up
<html>
<head>
<script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function () {
$(this).slideUp();
});
});
</script>
</head>
<body>
<body>
<p>asdf</p>
<p>asdf</p>
</body>
</html>
Slide up a DIV tag
<html>
<head>
<script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").click(function () {
$("div").slideUp();
});
});
</script>
</head>
<body>
<body>
<div>Click me</div>
</body>
</html>
Slide up callback
<html>
<head>
<script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function () {
$(this).parent().slideUp("slow", function () {
alert("done");
});
});
});
</script>
</head>
<body>
<body>
<div>Click me<button>button</button></div>
</body>
</html>
Slide up fast
<html>
<head>
<script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").click(function () {
$("div").slideUp("fast");
});
});
</script>
</head>
<body>
<body>
<div>Click me</div>
</body>
</html>
Slide up form controls
<html>
<head>
<script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function () {
$(this).parent().slideUp("slow", function () {
alert("done");
});
});
});
</script>
</head>
<body>
<body>
<div>Click me<button>button</button></div>
</body>
</html>
Slide up in milliseconds
<html>
<head>
<script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").click(function () {
$("div").slideUp(2000);
});
});
</script>
</head>
<body>
<body>
<div>Click me</div>
</body>
</html>
Slide up slowly
<html>
<head>
<script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").click(function () {
$("div").slideUp("slow");
});
});
</script>
</head>
<body>
<body>
<div>Click me</div>
</body>
</html>
Animates div to slide up, completing the animation within 400 milliseconds.
<html>
<head>
<script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document.body).click(function () {
if ($("div:first").is(":hidden")) {
$("div").show("slow");
} else {
$("div").slideUp();
}
});
});
</script>
</head>
<body>
<body>
Click me!
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
<div>asdf</div>
</body>
</html>
Animates all form controls to slide up
<html>
<head>
<script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function () {
$(this).parent().slideUp("slow", function () {
$("#msg").text($("button", this).text() + " has completed.");
});
});
});
</script>
</head>
<body>
<body>
<button>Hide One</button>
<input type="text" value="One" />
<button>Hide Two</button>
<input type="text" value="Two" />
<button>Hide Three</button>
<input type="text" value="Three" />
<div id="msg"></div>
</body>
</html>