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中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
Jun 28 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
Jan 27 Javascript
js实例属性和原型属性示例详解
Nov 23 Javascript
node.js中的http.response.addTrailers方法使用说明
Dec 14 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
May 24 Javascript
BootStrap轮播HTML代码(推荐)
Dec 10 Javascript
jquery中用函数来设置css样式
Dec 22 Javascript
浅谈javascript中的 “ &amp;&amp; ” 和 “ || ”
Feb 02 Javascript
详解Vue-cli 创建的项目如何跨域请求
May 18 Javascript
基于twbsPagination.js分页插件使用心得(分享)
Oct 21 Javascript
解决vue路由后界面没有变化,但是链接有的问题
Sep 01 Javascript
微信小程序实现文字跑马灯
May 26 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生成xml时添加CDATA标签的方法
2014/10/17 PHP
PHP将进程作为守护进程的方法
2015/03/19 PHP
如何使用纯PHP实现定时器任务(Timer)
2015/07/31 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
类似CSDN图片切换效果脚本
2009/09/17 Javascript
js自动闭合html标签(自动补全html标记)
2012/10/04 Javascript
关于JS中的闭包浅谈
2013/08/23 Javascript
js中文逗号转英文实现
2014/02/11 Javascript
js代码实现随机颜色的小方块
2015/07/30 Javascript
js模仿java的Map集合详解
2016/01/06 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
2016/06/21 Javascript
nodejs模块学习之connect解析
2017/07/05 NodeJs
探索webpack模块及webpack3新特性
2017/09/18 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
2017/10/19 jQuery
解决vue+webpack打包路径的问题
2018/03/06 Javascript
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
[02:23]2016国际邀请赛中国区预选赛wings晋级之路
2016/06/29 DOTA
Zabbix实现微信报警功能
2016/10/09 Python
Python竟能画这么漂亮的花,帅呆了(代码分享)
2017/11/15 Python
python地震数据可视化详解
2019/06/18 Python
python输入多行字符串的方法总结
2019/07/02 Python
如何使用python操作vmware
2019/07/27 Python
python实现代码统计器
2019/09/19 Python
Python常用模块logging——日志输出功能(示例代码)
2019/11/20 Python
Python使用tkinter实现摇骰子小游戏功能的代码
2020/07/02 Python
Python+Opencv身份证号码区域提取及识别实现
2020/08/25 Python
利用python爬取有道词典的方法
2020/12/08 Python
html5表单及新增的改良元素详解
2016/06/07 HTML / CSS
菲律宾领先的在线时尚商店:Zalora菲律宾
2018/02/08 全球购物
allbeauty美国:英国在线美容店
2019/03/11 全球购物
酒店总经理岗位职责范本
2014/08/08 职场文书
孩子教育的心得体会
2014/09/01 职场文书
名人演讲稿范文
2014/09/16 职场文书
学校工会工作总结2015
2015/05/19 职场文书
MSSQL基本语法操作
2022/04/11 SQL Server
Windows Server 2016 配置 IIS 的详细步骤
2022/04/28 Servers