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 相关文章推荐
提高代码性能技巧谈—以创建千行表格为例
Jul 01 Javascript
简单实用的js调试logger组件实现代码
Nov 20 Javascript
window.onload使用指南
Sep 13 Javascript
JavaScript函数内部属性和函数方法实例详解
Mar 17 Javascript
JavaScript 基础函数_深入剖析变量和作用域
May 18 Javascript
Bootstrap Modal遮罩弹出层代码分享
Nov 21 Javascript
原生js实现图片放大缩小计时器效果
Jan 20 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
Feb 16 Javascript
vue中将网页打印成pdf实例代码
Jun 15 Javascript
基于layui的下拉列表的数据回显方法
Sep 24 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
Oct 19 Javascript
vue组件添加事件@click.native操作
Oct 30 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编程过程中需要了解的this,self,parent的区别
2009/12/30 PHP
hadoop中一些常用的命令介绍
2013/06/19 PHP
计算php页面运行时间的函数介绍
2013/07/01 PHP
PHP安全的URL字符串base64编码和解码
2014/06/19 PHP
php递归法读取目录及文件的方法
2015/01/30 PHP
基于thinkphp6.0的success、error实现方法
2019/11/05 PHP
jQuery表格列宽可拖拽改变且兼容firfox
2014/09/03 Javascript
jQuery获得document和window对象宽度和高度的方法
2015/03/25 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
2015/11/02 Javascript
JavaScript &amp; jQuery完美判断图片是否加载完毕
2017/01/08 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
2017/02/13 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
2017/05/11 Javascript
JavaScript实现的反序列化json字符串操作示例
2018/07/18 Javascript
angular 未登录状态拦截路由跳转的方法
2018/10/09 Javascript
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
json解析大全 双引号、键值对不在一起的情况
2019/12/06 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
2020/01/21 Javascript
探索浏览器页面关闭window.close()的使用详解
2020/08/21 Javascript
Python制作简单的网页爬虫
2015/11/22 Python
python实现的正则表达式功能入门教程【经典】
2017/06/05 Python
用Python3创建httpServer的简单方法
2018/06/04 Python
Python中的Numpy矩阵操作
2018/08/12 Python
python从入门到精通 windows安装python图文教程
2019/05/18 Python
pytorch自定义初始化权重的方法
2019/08/17 Python
keras 指定程序在某块卡上训练实例
2020/06/22 Python
Amara德国:家居饰品、设计师品牌和豪华礼品
2019/05/20 全球购物
英国第一的滑雪服装和装备零售商:Snow+Rock
2020/02/01 全球购物
东方通信股份有限公司VC面试题
2014/08/27 面试题
计算机专业个人求职信范例
2013/09/23 职场文书
刊首寄语大全
2014/04/11 职场文书
纪检干部先进事迹材料
2014/08/23 职场文书
学校领导干部民主生活会整改方案
2014/09/29 职场文书
2014年村支部书记四风对照检查材料思想汇报
2014/10/02 职场文书
2014年体育教学工作总结
2014/12/09 职场文书
2015年物资管理工作总结
2015/05/20 职场文书
MySQL数据库如何查看表占用空间大小
2022/06/10 MySQL