.slideDown()
In this chapter you will learn:
- Syntax and Description for .slideDown()
- Slide down a paragraph
- slideDown and slideUp
- Hide and Slide down
- Slide down and set focus
- Slide down fast
- Slide down slowly
- Slide down form fields
- Slide down in milliseconds
- Slide to show paragraph
- Animate height
Syntax and Description
$(selector).slideDown([speed,] [easing,] [callback]);
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 runcallback (optional)
A function to call once the animation is complete
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.
$.slideDown()
accepts a callback function, which is executed once the
$.slideDown() function has finished executing.
Slide down a paragraph
<html><!--from j a v a2s.c o m-->
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").one('click', function () {
if ($(this).is(":first-child")) {
$("p").text("It's the first div.");
}else{
$("p").text("It's NOT the first div.");
}
$("p").hide().slideDown("slow");
});
});
</script>
<style>
div { border:2px white solid;}
</style>
</head>
<body>
<body>
Press each to see the text.
<div>java2s.com</div>
<div>java2s.com</div>
<div>java2s.com</div>
<div>java2s.com</div>
<div>java2s.com</div>
<div>java2s.com</div>
<p></p>
</body>
</html>
slideDown and slideUp
The following message shows the usage of slideDown and slideUp
<!DOCTYPE html><!--from ja v a 2 s .c o m-->
<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/style/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>
Hide and Slide down
<html><!-- ja v a2 s . c om-->
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function () {
$("p").hide();
$("p").slideDown();
});
});
</script>
</head>
<body>
<body>
<p>Hello java2s.com</p>
</body>
</html>
Slide down and set focus
<html><!--from j a v a2 s. co m-->
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").click(function () {
$("input").slideDown(1000,function(){
$(this).focus();
});
});
});
</script>
<style>
input { display:none;margin:10px; }
</style>
</head>
<body>
<body>
<div>Click me</div>
<input type="text" />
<input type="text"/>
<input type="text" />
</body>
</html>
Slide down fast
<html><!--from j a va 2s . c om-->
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function () {
$("p").hide();
$("p").slideDown("fast");
});
});
</script>
</head>
<body>
<body>
<p>Hello java2s.com</p>
</body>
</html>
Slide down slowly
<html><!-- j a va2 s .co m-->
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function () {
$("p").hide();
$("p").slideDown("slow");
});
});
</script>
</head>
<body>
<body>
<p>Hello java2s.com</p>
</body>
</html>
Slide down form fields
<html><!-- j a v a 2 s. c om-->
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").click(function () {
$("input").slideDown(1000,function(){
$(this).focus();
});
});
});
</script>
<style>
input { display:none;margin:10px; }
</style>
</head>
<body>
<body>
<div>Click me java2s.com</div>
<input type="text" />
<input type="text"/>
<input type="text" />
</body>
</html>
Slide down in milliseconds
<html><!--from j a v a2s . co m-->
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function () {
$("p").hide();
$("p").slideDown(10000);
});
});
</script>
</head>
<body>
<body>
<p>Hello java2s.com</p>
</body>
</html>
Slide to show paragraph
<html><!--from j a v a2 s . c o m-->
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").one('click', function () {
if ($(this).is(":first-child")) {
$("p").text("It's the first div.");
}else{
$("p").text("It's NOT the first div.");
}
$("p").hide().slideDown("slow");
});
});
</script>
<style>
div { border:2px white solid;}
</style>
</head>
<body>
<body>
Press each to see the text.
<div>java2s.com</div>
<div>java2s.com</div>
<div>java2s.com</div>
<div>java2s.com</div>
<div>java2s.com</div>
<div>java2s.com</div>
<p></p>
</body>
</html>
Animate height
Only the height is adjusted for this animation
<html><!--from j a va2s.c o m-->
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document.body).click(function () {
if ($("div:first").is(":hidden")) {
$("div").slideDown("slow");
} else {
$("div").hide();
}
});
});
</script>
</head>
<body>
<body>
<div>java2s.com</div><div>java2s.com</div><div>java2s.com</div><div>java2s.com</div>
</body>
</html>
Next chapter...
What you will learn in the next chapter:
- Syntax and Description for .slideToggle()
- Slide animation
- Slide toggle and function
- Slide toggle button
- Slide toggle callback
- Fast slide toggle
- Slide toggle in milliseconds
- Slide toggle slow