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 相关文章推荐
网页整体变灰白色(兼容各浏览器)实例
Apr 21 Javascript
完美解决AJAX跨域问题
Nov 01 Javascript
JavaScript的各种常见函数定义方法
Sep 16 Javascript
innerHTML在IE中报错解决方案
Dec 15 Javascript
node.js使用cluster实现多进程
Mar 17 Javascript
Bootstrap每天必学之模态框(Modal)插件
Apr 26 Javascript
ES6生成器用法实例分析
Apr 10 Javascript
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
Oct 31 Javascript
Three.js加载外部模型的教程详解
Nov 10 Javascript
Angular中使用MathJax遇到的一些问题
Dec 15 Javascript
详解微信小程序获取当前时间及日期的方法
Apr 28 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
在PHP3中实现SESSION的功能(三)
2006/10/09 PHP
显示程序执行时间php函数代码
2013/08/29 PHP
Linux编译升级php的详细方法
2013/11/04 PHP
CI框架中zip类应用示例
2014/06/17 PHP
php+ajax实现带进度条的上传图片功能【附demo源码下载】
2016/09/14 PHP
thinkphp3.2.3版本的数据库增删改查实现代码
2016/09/22 PHP
PHP聊天室简单实现方法详解
2018/12/08 PHP
javascript 三种编解码方式
2010/02/01 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
2013/04/01 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
2013/04/17 Javascript
js open() 与showModalDialog()方法使用介绍
2013/09/10 Javascript
JS获取地址栏参数的几种方法小结
2014/02/28 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
2017/03/02 Javascript
浅谈angular.js跨域post解决方案
2017/08/30 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
2018/01/18 jQuery
JavaScript面向对象的程序设计(犯迷糊的小羊)
2018/05/27 Javascript
vue使用rem实现 移动端屏幕适配
2018/09/26 Javascript
jQuery zTree插件快速实现目录树
2019/08/16 jQuery
VUE单页面切换动画代码(全网最好的切换效果)
2019/10/31 Javascript
JavaScript实现HSL拾色器
2020/05/21 Javascript
[01:29]Ti4循环赛第三日精彩回顾
2014/07/13 DOTA
[16:43]Heroes19_剃刀(完美)
2014/10/31 DOTA
[05:36]DOTA2 2015国际邀请赛中国区预选赛第四日TOP10
2015/05/29 DOTA
[06:25]第二届DOTA2亚洲邀请赛主赛事第二天比赛集锦.mp4
2017/04/03 DOTA
使用C语言来扩展Python程序和Zope服务器的教程
2015/04/14 Python
利用python代码写的12306订票代码
2015/12/20 Python
python中的json总结
2018/10/11 Python
Python 装饰器原理、定义与用法详解
2019/12/07 Python
俄罗斯有趣和原创礼物网上商店:MagicMag
2019/08/01 全球购物
Perfume’s Club英国官网:购买香水和护肤品
2019/11/02 全球购物
电气专业推荐信范文
2013/11/18 职场文书
教师业务培训方案
2014/05/01 职场文书
村干部培训方案
2014/05/02 职场文书
中学团支部工作总结
2015/08/13 职场文书
旅游安全责任协议书
2016/03/22 职场文书
使用CSS实现六边形的图片效果
2022/08/05 HTML / CSS