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 相关文章推荐
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
Feb 09 Javascript
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
Feb 26 Javascript
在JavaScript中获取请求的URL参数
Dec 22 Javascript
JS实现日期加减的方法
Nov 29 Javascript
利用浏览器全屏api实现js全屏
Jan 16 Javascript
jQuery下拉美化搜索表单效果代码分享
Aug 25 Javascript
JavaScript多图片上传案例
Sep 28 Javascript
第一章之初识Bootstrap
Apr 25 Javascript
Vue实战之vue登录验证的实现代码
Oct 31 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
Nov 23 Javascript
微信小程序登陆注册功能的实现代码
Dec 10 Javascript
vue里使用create, mounted调用方法
Apr 26 Vue.js
基于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采集腾讯微博的实现代码
2012/01/19 PHP
PHP 读取大文件的X行到Y行内容的实现代码
2013/06/24 PHP
php多文件上传实现代码
2014/02/20 PHP
PHP使用mongoclient简单操作mongodb数据库示例
2019/02/08 PHP
Laravel5.5 数据库迁移:创建表与修改表示例
2019/10/23 PHP
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
2009/10/29 Javascript
使用变量动态设置js的属性名
2014/10/19 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
2014/12/01 Javascript
jquery实现标签上移、下移、置顶
2015/04/26 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
2015/11/06 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
2016/06/07 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
2016/08/11 Javascript
老生常谈JavaScript中的this关键字
2016/10/01 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
2017/04/21 Javascript
electron demo项目npm install安装失败的解决方法
2018/02/06 Javascript
Vue.js中关于侦听器(watch)的高级用法示例
2018/05/02 Javascript
解决bootstrap模态框数据缓存的问题方法
2018/08/10 Javascript
详解React项目中碰到的IE问题
2019/03/14 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
2019/09/11 Javascript
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
小程序实现图片预览裁剪插件
2019/11/22 Javascript
移动端JS实现拖拽两种方法解析
2020/10/12 Javascript
python任务调度实例分析
2015/05/19 Python
Python实现简单层次聚类算法以及可视化
2019/03/18 Python
用python画一只可爱的皮卡丘实例
2019/11/21 Python
From CSV to SQLite3 by python 导入csv到sqlite实例
2020/02/14 Python
python绘制雷达图实例讲解
2021/01/03 Python
一个不错的HTML5 Canvas多层点击事件监听实例
2014/04/29 HTML / CSS
HTML5 Canvas基本线条绘制的实例教程
2016/03/17 HTML / CSS
StubHub澳大利亚:购买或出售您的门票
2019/08/01 全球购物
大学生创业感言
2014/01/25 职场文书
高校十八大报告感想
2014/01/27 职场文书
满月酒主持词
2014/03/27 职场文书
民主生活会剖析材料
2014/09/30 职场文书
2015教师节师德演讲稿
2015/03/19 职场文书
2016年第32个教师节致辞
2015/11/26 职场文书