jQuery中slideUp()以及slideDown()方法

在JQ的设置前端web页面的动画中，我们有时候需要对指定元素的高度进行设置，比如指定一个DIV标签的高度从0到我们设置好的高度，或是从我们设置好的高到0。如果想实现这种效果我们该如何去做呢？

JQ中的slideUp方法解释

slideUp():通过使用滑动效果，隐藏被选元素，如果元素已显示出来的话。

语法：

$(selector).slideUp(speed,callback)

speed:可选，表示动画运行的时候

callback:表示函数执行完后，要执行的函数

JQ中的slideDown()方法解释

slideDown():通过使用滑动效果，显示被选元素，如果元素已隐藏的话。

语法：

$(selector).slideUp(speed,callback)

speed:可选，表示动画运行的时候

callback:表示函数执行完后，要执行的函数

举例说明一下

利用slideUp()与slideDown()方法，显示与隐藏元素

HTML代码

<div style="width:400px">
你好，欢迎访问我的博客（飞鸟慕鱼博客），如果你对
本博客有什么好的建议或想购买本博客出品的Z-blog主题，可以
联系我或是给我留言哦！
</div>
<button id='button'>隐藏</button>
<button id='button2'>显示</button>

JQ代码

$("#button").click(function () {
    $("div").slideUp();
 });
$("#button2").click(function(){
    $("div").slideDown();
});

结果：

点击隐藏按钮后：DIV会从下到上缩短并隐藏

点击显示按钮后，DIV会从上到下伸展并显示

JQ中的slideToggle()方法解释与介绍

slideToggle() 方法通过使用滑动效果（高度变化）来切换元素的可见状态。

语法：

$(selector).slideToggle(speed,callback)

speed:可选，表示动画运行的时候

callback:表示函数执行完后，要执行的函数

举例子说明问题

利用slideToggle()方法，点击按钮让DIV显示或隐藏

HTML代码

<div style="width:400px">
你好，欢迎访问我的博客（飞鸟慕鱼博客），如果你对
本博客有什么好的建议或想购买本博客出品的Z-blog主题，可以
 联系我或是给我留言哦！
</div>
<button id='button'>隐藏/显示</button>

JQ代码

$("#button").click(function () {
    $("div").slideToggle();
});

结果：

点击按钮，DIV会在显示与隐藏两种状态中切换