jQuery中slideUp()以及slideDown()方法
墨初 前端设计 19311阅读
在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会在显示与隐藏两种状态中切换