你好,欢迎访问我的博客!登录 评论排行榜 领券购物 免责声明 投稿本站 本站主题
当前位置:首页 - 笔记 - JS/JQ - 正文 代码,改变世界!

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

2018-02-13JS/JQ墨初773°c
A+ A-

在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代码

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

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

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

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

JQ代码

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

结果:

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


  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
jQuery中slideUp()以及slideDown()方法

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签:

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>


  用户登录