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