.slideDown()
.slideDown( [ duration ], [ callback ] ) 返回： jQuery
描述： 用滑動動畫顯示一個匹配元素。
-
version added: 1.0.slideDown( [ duration ], [ callback ] )
duration一個字符串或者數字決定動畫將運行多久。
callback在動畫完成時執(zhí)行的函數。
-
version added: 1.4.3.slideDown( [ duration ], [ easing ], [ callback ] )
duration一個字符串或者數字決定動畫將運行多久。
easing一個用來表示使用哪個緩沖函數來過渡的字符串。
callback在動畫完成時執(zhí)行的函數。
.slideDown()方法將給匹配元素的高度的動畫，這會導致頁面的下面部分滑下去，彌補了顯示物品的方式。
持續(xù)時間是以毫秒為單位的，數值越大，動畫越慢，不是越快。字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時。如果提供任何其他字符串，或者這個duration參數被省略，那么默認使用400 毫秒的延時。
如果提供回調函數參數，回調函數會在動畫完成的時候調用。這個對于將不同的動畫串聯在一起按順序排列是非常有用的。這個回調函數不設置任何參數，但是this是存在動畫的DOM元素，如果多個元素一起做動畫效果，值得注意的是每執(zhí)行一次回調匹配的元素，而不是作為一個整體的動畫一次。
我們可以給任何元素做動畫，比如一個簡單的圖片：
<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>