jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)


Posted in Javascript onJune 28, 2011

实例
通过使用滑动效果,在显示和隐藏状态之间切换 <p> 元素:

$(".btn1").click(function(){ 
$("p").slideToggle(); 
});

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

如果被选元素是可见的,则隐藏这些元素,如果被选元素是隐藏的,则显示这些元素。

语法
$(selector).slideToggle(speed,callback)参数 描述
speed 可选。规定元素从隐藏到可见的速度(或者相反)。默认为 "normal"。

可能的值:

毫秒 (比如 1500)
"slow"
"normal"
"fast"
在设置速度的情况下,元素在切换的过程中,会逐渐地改变其高度(这样会创造滑动效果)。

callback 可选。toggle 函数执行完之后,要执行的函数。

如需学习更多有关 callback 的内容,请访问我们的 jQuery Callback 这一章。

除非设置了 speed 参数,否则不能设置该参数。

提示和注释
提示:如果元素已经隐藏,则该效果不产生任何变化,除非规定了 callback 函数。

Javascript 相关文章推荐
jQuery 创建Dom元素
May 07 Javascript
js中取得变量绝对值的方法
Jan 03 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
Sep 19 Javascript
jQuery实现二级下拉菜单效果
Jan 05 Javascript
浅谈js中test()函数在正则中的使用
Aug 19 Javascript
get  post jsonp三种数据交互形式实例详解
Aug 25 Javascript
webpack项目调试以及独立打包配置文件的方法
Feb 28 Javascript
如何使用puppet替换文件中的string
Dec 06 Javascript
小程序实现搜索框功能
Mar 26 Javascript
javascript随机变色实例代码
Oct 15 Javascript
Javascript地址引用代码实例解析
Feb 25 Javascript
js实现简单的倒计时
Jan 28 Javascript
基于jquery的回到页面顶部按钮
Jun 27 #Javascript
jQuery新闻滚动插件 jquery.roller.js
Jun 27 #Javascript
jquery中获取select选中值的代码
Jun 27 #Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
Jun 27 #Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
Jun 27 #Javascript
读jQuery之十 事件模块概述
Jun 27 #Javascript
AeroWindow 基于JQuery的弹出窗口插件
Jun 27 #Javascript
You might like
深入理解PHP之require/include顺序 推荐
2011/01/02 PHP
php之static静态属性与静态方法实例分析
2015/07/30 PHP
利用phpexcel对数据库数据的导入excel(excel筛选)、导出excel
2017/04/27 PHP
one.php 多项目、函数库、类库 统一为一个版本的方法
2020/08/24 PHP
CSS和Javascript简单复习资料
2010/06/29 Javascript
JS页面延迟执行一些方法(整理)
2013/11/11 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
2013/12/05 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
2014/02/07 Javascript
使用JS获取当前地理位置方法汇总
2014/12/18 Javascript
Javascript之String对象详解
2016/06/08 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
2016/10/28 Javascript
详解angularJs中自定义directive的数据交互
2017/01/13 Javascript
Bootstrap模态框插件使用详解
2017/05/11 Javascript
Angular 开发学习之Angular CLI的安装使用
2017/12/31 Javascript
Vue中v-for的数据分组实例
2018/03/07 Javascript
手写简单的jQuery雪花飘落效果实例
2018/04/22 jQuery
9102了,你还不会移动端真机调试吗
2019/03/25 Javascript
微信小程序 下拉刷新及上拉加载原理解析
2019/11/06 Javascript
如何在JavaScript中等分数组的实现
2020/12/13 Javascript
[01:35]2018完美盛典章节片——共竞
2018/12/17 DOTA
Python基于DES算法加密解密实例
2015/06/03 Python
Python实现简单HTML表格解析的方法
2015/06/15 Python
python的paramiko模块实现远程控制和传输示例
2017/10/13 Python
Python paramiko模块的使用示例
2018/04/11 Python
Pycharm保存不能自动同步到远程服务器的解决方法
2019/06/27 Python
Django多数据库的实现过程详解
2019/08/01 Python
Jupyter Notebook远程登录及密码设置操作
2020/04/10 Python
NFL Game Pass欧洲:在线观看NFL比赛直播和点播,以高清质量播放
2018/08/30 全球购物
工商学院毕业生个人自我评价
2013/09/19 职场文书
市场营销个人求职信范文
2014/02/02 职场文书
房屋公证委托书
2014/04/03 职场文书
兽医医药专业求职信
2014/07/27 职场文书
学校党的群众路线教育实践活动整改措施
2014/10/25 职场文书
国富论读书笔记
2015/06/26 职场文书
公司人事管理制度
2015/08/05 职场文书
正确使用MySQL update语句
2021/05/26 MySQL