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的$.event.fix函数统一浏览器event事件处理
Dec 21 Javascript
js生成缩略图后上传并利用canvas重绘
May 15 Javascript
jQuery循环滚动新闻列表示例代码
Jun 17 Javascript
jQuery验证插件 Validate详解
Nov 20 Javascript
jQuery实现新消息在网页标题闪烁提示
Jun 23 Javascript
基于jQuery实现音乐播放试听列表
Apr 14 Javascript
ionic 上拉菜单(ActionSheet)实例代码
Jun 06 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
Aug 08 Javascript
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
浅谈Node新版本13.2.0正式支持ES Modules特性
Nov 25 Javascript
解决vant中 tab栏遇到的坑 van-tabs
Nov 04 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
Linux下进行MYSQL编程时插入中文乱码的解决方案
2007/03/15 PHP
浅谈discuz密码加密的方式
2014/05/22 PHP
PHP图片处理之使用imagecopy函数添加图片水印实例
2014/11/19 PHP
PHP5.3新特性小结
2016/02/14 PHP
ThinkPHP静态缓存简单配置和使用方法详解
2016/03/23 PHP
PHP数组array类常见操作示例
2020/05/15 PHP
JavaScript Event事件学习第一章 Event介绍
2010/02/07 Javascript
JavaScript中valueOf函数与toString方法深入理解
2012/12/02 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
2013/02/05 Javascript
JavaScript实现仿网易通行证表单验证
2015/05/25 Javascript
JavaScript检测原始值、引用值、属性
2016/06/20 Javascript
学习JavaScript图片预加载模块
2016/11/07 Javascript
浅谈express 中间件机制及实现原理
2017/08/31 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
2018/09/14 Javascript
JavaScript创建防篡改对象的方法分析
2018/12/30 Javascript
vue data变量相互赋值后被实时同步的解决步骤
2020/08/05 Javascript
Vue2.x-使用防抖以及节流的示例
2021/03/02 Vue.js
python 字典(dict)按键和值排序
2016/06/28 Python
python实现按长宽比缩放图片
2018/06/07 Python
python使用pygame框架实现推箱子游戏
2018/11/20 Python
pyqt5 删除layout中的所有widget方法
2019/06/25 Python
python创建与遍历List二维列表的方法
2019/08/16 Python
使用Pycharm在运行过程中,查看每个变量的操作(show variables)
2020/06/08 Python
keras实现多种分类网络的方式
2020/06/11 Python
CSS3实现文字描边的2种方法(小结)
2020/02/14 HTML / CSS
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
阿联酋优惠券服务:Living Kool
2019/12/12 全球购物
出纳的岗位职责
2013/11/09 职场文书
房屋登记授权委托书范本
2014/10/09 职场文书
感动中国何玥观后感
2015/06/02 职场文书
母亲节感言
2015/08/03 职场文书
JavaScript中关于预编译、作用域链和闭包的理解
2021/03/31 Javascript
秀!学妹看见都惊呆的Python小招数!【详细语言特性使用技巧】
2021/04/27 Python
探究Mysql模糊查询是否区分大小写
2021/06/11 MySQL
详细介绍python操作RabbitMq
2022/04/12 Python
JavaScript前端面试扁平数据转tree与tree数据扁平化
2022/06/14 Javascript