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 相关文章推荐
JS兼容浏览器的导出Excel(CSV)文件的方法
May 03 Javascript
javascript单引号和双引号的区别和处理
May 14 Javascript
JavaScript的ExtJS框架中表格的编写教程
May 21 Javascript
js 声明数组和向数组中添加对象变量的简单实例
Jul 28 Javascript
AngularJs表单校验功能实例代码
Feb 09 Javascript
js获取ip和地区
Mar 10 Javascript
jsonp跨域请求实现示例
Mar 13 Javascript
基于node.js之调试器详解
Aug 22 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
Apr 13 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
Sep 12 Javascript
uni-app如何页面传参数的几种方法总结
Apr 28 Javascript
jquery实现手风琴案例
May 04 jQuery
基于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 定义404页面的实现代码
2012/11/19 PHP
如何用php获取文件名后缀
2013/06/09 PHP
php读取torrent种子文件内容的方法(测试可用)
2016/05/03 PHP
php mysql获取表字段名称和字段信息的三种方法
2016/11/13 PHP
PHP常用字符串函数用法实例总结
2020/06/04 PHP
PHP SESSION跨页面传递失败解决方案
2020/12/11 PHP
js正确获取元素样式详解
2009/08/07 Javascript
javascript面向对象之二 命名空间
2011/02/08 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
2013/03/05 Javascript
js锁屏解屏通过对$.ajax进行封装实现
2014/07/31 Javascript
JavaScript的null和undefined区别示例介绍
2014/09/15 Javascript
jQuery操作JSON的CRUD用法实例
2015/02/25 Javascript
详解js中class的多种函数封装方法
2016/01/03 Javascript
jQuery编写设置和获取颜色的插件
2017/01/09 Javascript
javascript事件的传播基础实例讲解(35)
2017/02/14 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
2017/05/22 Javascript
JavaScrip关于创建常量的知识点
2017/12/07 Javascript
vue 点击按钮增加一行的方法
2018/09/07 Javascript
JavaScript实现无限级递归树的示例代码
2019/03/29 Javascript
node.js域名解析实现方法详解
2019/11/05 Javascript
js实现点击烟花特效
2020/10/14 Javascript
vue + el-form 实现的多层循环表单验证
2020/11/25 Vue.js
在Django中创建第一个静态视图
2015/07/15 Python
简单学习Python time模块
2016/04/29 Python
Linux CentOS7下安装python3 的方法
2018/01/21 Python
python调用虹软2.0第三版的具体使用
2019/02/22 Python
详解python 3.6 安装json 模块(simplejson)
2019/04/02 Python
对Matlab中共轭、转置和共轭装置的区别说明
2020/05/11 Python
Python selenium环境搭建实现过程解析
2020/09/08 Python
基于Python制作一副扑克牌过程详解
2020/10/19 Python
用CSS3实现瀑布流布局的示例代码
2017/11/10 HTML / CSS
采购人员的个人自我评价
2014/01/16 职场文书
七一党建活动方案
2014/01/28 职场文书
银行柜员与客户起冲突检讨书
2014/09/27 职场文书
疾病证明书
2015/06/19 职场文书
Apache SeaTunnel实现 非CDC数据抽取
2022/05/20 Servers