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 相关文章推荐
使图片旋转的3种解决方案
Nov 21 Javascript
jQuery实现多级联动下拉列表查询框
Jan 18 Javascript
详解js中call与apply关键字的作用
Nov 21 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
Aug 10 Javascript
ES6学习教程之对象字面量详解
Oct 09 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
Jan 16 Javascript
JavaScript实现一个带AI的井字棋游戏源码
May 21 Javascript
JS实现可针对算术表达式求值的计算器功能示例
Sep 04 Javascript
详解JavaScript实现动态的轮播图效果
Apr 29 Javascript
微信小程序监听用户登录事件的实现方法
Nov 11 Javascript
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
在HTML5 localStorage中存储对象的示例代码
Apr 21 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
IIS6.0中配置php服务全过程解析
2013/08/07 PHP
JavaScript 的方法重载效果
2009/08/07 Javascript
javascript 日期常用的方法
2009/11/11 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
2012/07/25 Javascript
载入jQuery库的最佳方法详细说明及实现代码
2012/12/28 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
2015/02/23 Javascript
javascript基于DOM实现权限选择实例分析
2015/05/14 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
2015/12/03 Javascript
JS文件上传神器bootstrap fileinput详解
2021/01/28 Javascript
使用node.js搭建服务器
2017/05/20 Javascript
Mac系统下Webstorm快捷键整理大全
2017/05/28 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
2017/07/20 Javascript
Vue中的作用域CSS和CSS模块的区别
2018/10/09 Javascript
Javascript的this详解
2019/03/23 Javascript
JS实现移动端点击按钮复制文本内容
2019/07/28 Javascript
JavaScript使用prototype属性实现继承操作示例
2020/05/22 Javascript
解决Vue @submit 提交后不刷新页面问题
2020/07/18 Javascript
浅谈Python基础之I/O模型
2017/05/11 Python
详解爬虫被封的问题
2019/04/23 Python
python实现WebSocket服务端过程解析
2019/10/18 Python
python 实现turtle画图并导出图片格式的文件
2019/12/07 Python
python离线安装外部依赖包的实现
2020/02/13 Python
python实现读取类别频数数据画水平条形图案例
2020/04/24 Python
python框架flask入门之环境搭建及开启调试
2020/06/07 Python
纯CSS3制作漂亮带动画效果的主机价格表
2015/04/25 HTML / CSS
StubHub新西兰:购买和出售你的门票
2019/04/22 全球购物
行政助理工作职责范本
2014/03/04 职场文书
大学生就业自我推荐信
2014/05/10 职场文书
小学生环保标语
2014/06/13 职场文书
启动仪式策划方案
2014/06/14 职场文书
公司授权委托书样本
2014/09/15 职场文书
神龙架导游词
2015/02/11 职场文书
诚信考试主题班会
2015/08/17 职场文书
正确的理解和使用Django信号(Signals)
2021/04/14 Python
Java 中的 Lambda List 转 Map 的多种方法详解
2022/07/07 Java/Android
tree shaking对打包体积优化及作用
2022/07/07 Java/Android