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 相关文章推荐
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
Aug 15 Javascript
jQuery之网页换肤实现代码
Apr 30 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
Jul 18 Javascript
jQuery源码分析之jQuery中的循环技巧详解
Sep 06 Javascript
javascript常用方法汇总
Dec 02 Javascript
angular中使用Socket.io实例代码
Jun 03 Javascript
浅谈Node.js爬虫之网页请求模块
Jan 11 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
Jan 16 Javascript
vue 使用Jade模板写html,stylus写css的方法
Feb 23 Javascript
Angular4 ElementRef的应用
Feb 26 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
Jul 13 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
Dec 19 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使用str_replace实现输入框回车替换br的方法
2014/11/24 PHP
php实现数组按指定KEY排序的方法
2015/03/30 PHP
PHP中call_user_func_array回调函数的用法示例
2016/11/26 PHP
Laravel框架模板加载,分配变量及简单路由功能示例
2018/06/11 PHP
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
2013/08/13 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
2013/12/13 Javascript
一个jquery实现的不错的多行文字图片滚动效果
2014/09/28 Javascript
详解handlebars+require基本使用方法
2016/12/21 Javascript
JavaScript实现图片瀑布流和底部刷新
2017/01/02 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
2017/08/01 jQuery
AngularJS select加载数据选中默认值的方法
2018/02/28 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
2018/06/28 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
2018/07/05 Javascript
JSON基本语法及与JavaScript的异同实例分析
2019/01/04 Javascript
Node.js EventEmmitter事件监听器用法实例分析
2019/01/07 Javascript
JavaScript箭头函数中的this详解
2019/06/19 Javascript
vue-router之实现导航切换过渡动画效果
2019/10/31 Javascript
vue路由传参的基本实现方式小结【三种方式】
2020/02/05 Javascript
解决vue打包 npm run build-test突然不动了的问题
2020/11/13 Javascript
javascript前端实现多视频上传
2020/12/13 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
2020/12/17 Vue.js
python访问抓取网页常用命令总结
2017/04/11 Python
彻底理解Python list切片原理
2017/10/27 Python
PyQt5实现五子棋游戏(人机对弈)
2020/03/24 Python
利用python开发app实战的方法
2019/07/09 Python
jupyter notebook tensorflow打印device信息实例
2020/04/20 Python
使用HTML5中的contentEditable来将多行文本自动增高
2016/03/01 HTML / CSS
单身旅行者的单身假期:Just You
2018/04/08 全球购物
经济学人订阅:The Economist
2018/07/19 全球购物
法国隐形眼镜网站:VisionDirect.fr
2020/03/03 全球购物
关爱留守儿童标语
2014/06/18 职场文书
建筑工地宣传标语
2014/06/18 职场文书
银行转正自我鉴定
2014/09/29 职场文书
报到证办理个人委托书
2014/10/06 职场文书
党员检讨书范文
2014/12/27 职场文书
在python中实现导入一个需要传参的模块
2021/05/12 Python