.slideDown()
.slideDown( [ duration ], [ callback ] ) 官网原E文： jQuery
描述： 用滑动动画显示一个匹配元素。
-
version added: 1.0.slideDown( [ duration ], [ callback ] )
duration一个字符串或者数字决定动画将运行多久。
callback在动画完成时执行的函数。
-
version added: 1.4.3.slideDown( [ duration ], [ easing ], [ callback ] )
duration一个字符串或者数字决定动画将运行多久。
easing一个用来表示使用哪个缓冲函数来过渡的字符串。
callback在动画完成时执行的函数。
.slideDown()方法将给匹配元素的高度的动画，这会导致页面的下面部分滑下去，弥补了显示物品的方式。
持续时间是以毫秒为单位的，数值越大，动画越慢，不是越快。字符串 'fast' 和 'slow' 分别代表200和600毫秒的延时。如果提供任何其他字符串，或者这个duration参数被省略，那么默认使用400 毫秒的延时。
如果提供回调函数参数，回调函数会在动画完成的时候调用。这个对于将不同的动画串联在一起按顺序排列是非常有用的。这个回调函数不设置任何参数，但是this是存在动画的DOM元素，如果多个元素一起做动画效果，值得注意的是每执行一次回调匹配的元素，而不是作为一个整体的动画一次。
我们可以给任何元素做动画，比如一个简单的图片：
<div id="clickme"> Click here </div> <img id="book" src="book.png" alt="" width="100" height="123" />
With the element initially hidden, we can show it slowly:
$('#clickme').click(function() {
$('#book').slideDown('slow', function() {
// Animation complete.
});
});
注意：
-
所有的jQuery效果，包括
.slideDown(),能使用jQuery.fx.off = true关闭全局性。更多信息请查看jQuery.fx.off。
例子：
举例： Animates all divs to slide down and show themselves over 600 milliseconds.
<!DOCTYPE html>
<html>
<head>
<style>
div { background:#de9a44; margin:3px; width:80px;
height:40px; display:none; float:left; }
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
Click me!
<div></div>
<div></div>
<div></div>
<script>
$(document.body).click(function () {
if ($("div:first").is(":hidden")) {
$("div").slideDown("slow");
} else {
$("div").hide();
}
});
</script>
</body>
</html>Demo:
Example: Animates all inputs to slide down, completing the animation within 1000 milliseconds. Once the animation is done, the input look is changed especially if it is the middle input which gets the focus.
<!DOCTYPE html>
<html>
<head>
<style>
div { background:#cfd; margin:3px; width:50px;
text-align:center; float:left; cursor:pointer;
border:2px outset black; font-weight:bolder; }
input { display:none; width:120px; float:left;
margin:10px; }
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div>Push!</div>
<input type="text" />
<input type="text" class="middle" />
<input type="text" />
<script>
$("div").click(function () {
$(this).css({ borderStyle:"inset", cursor:"wait" });
$("input").slideDown(1000,function(){
$(this).css("border", "2px red inset")
.filter(".middle")
.css("background", "yellow")
.focus();
$("div").css("visibility", "hidden");
});
});
</script>
</body>
</html>