jQuery特效-slide

备注：方法的参数类型，见 jQuery特效-方法参数类型

.slideUp()

通过滑动的动作隐藏匹配元素

.slideUp( [duration ] [, complete ] )
.slideUp( options )
.slideUp( [duration ] [, easing ] [, complete ] )

.slideUp()方法变化匹配元素的高度。这个会导致页面下面的部分向上滑动，会把该条目隐藏。一旦透明度到达0时，display的样式会被设置为none.因此元素不会再影响页面的布局。

<script>
$(document.body).click(function () {
if ($("div:first").is(":hidden")) {
$("div").show("slow");
} else {
$("div").slideUp();
}
});
</script>

<script>
$("button").click(function () {
$(this).parent().slideUp("slow", function () {
$("#msg").text($("button", this).text() + " has completed.");
});
});
</script>

.slideDown()

通过滑动的动作显示匹配元素

.slideDown( [duration ] [, complete ] )

.slideDown( options )

.slideDown( [duration ] [, easing ] [, complete ] )

.slideDown()方法变化匹配元素的高度。这个会导致页面下面的部分向下滑动，给可见的元素移动位置。一旦透明度到达0时，display的样式会被设置为none.因此元素不会再影响页面的布局。

如果.slideDown()被在无需列表(<ul>)上调用时，并且<li>元素有position为(relative, absolute, or fixed)，特效在IE6到至少IE9不能正确的运行，除非<ul>有layout。来补救这个方法可以给ul添加position: relative;和zoom:1;的CSS声明。

<script>
$(document.body).click(function () {
if ($("div:first").is(":hidden")) {
$("div").slideDown("slow");
} else {
$("div").hide();
}
});
</script>

<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>

.slideToggle()

通过滑动动作显示或隐藏匹配元素

.slideToggle( [duration ] [, complete ] )

.slideToggle( options )

.slideToggle( [duration ] [, easing ] [, complete ] )

.slideToggle()方法变化匹配元素的高度。这个会导致页面下面的部分向上或向下滑动，显示或隐藏该内容。如果最初的元素是显示的，它会被隐藏；如果是隐藏的，它会被显示。display属性会被保存，在需要的时候会被重新设值。如果元素的display的值为inline，然后被隐藏和显示，它会被再次显示为inline.在隐藏动画结束后，当高度为0时，display样式会被设置为none，来确保该元素不会影响页面的布局。

<script>
$("button").click(function () {
$("p").slideToggle("slow");
});
</script>

<script>
$("#aa").click(function () {
$("div:not(.still)").slideToggle("slow", function () {
var n = parseInt($("span").text(), 10);
$("span").text(n + 1);
});
});
</script>