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 String 对象
Apr 25 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
Jun 22 Javascript
js闭包的用途详解
Nov 09 Javascript
js设置document.domain实现跨域的注意点分析
May 21 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
Nov 30 Javascript
Node.js包管理器Yarn的入门介绍与安装
Oct 17 Javascript
完全深入学习Bootstrap表单
Nov 28 Javascript
Vue上传组件vue Simple Uploader的用法示例
Aug 25 Javascript
JavaScript实现五子棋游戏的方法详解
Jul 08 Javascript
jQuery实现聊天对话框
Feb 08 jQuery
一篇文章让你搞懂JavaScript 原型和原型链
Nov 23 Javascript
React 高阶组件HOC用法归纳
Jun 13 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
多人战的战术与战略
2020/03/04 星际争霸
PHP实现变色验证码实例
2014/01/06 PHP
php保存信息到当前Session的方法
2015/03/16 PHP
PHP常见数组函数用法小结
2016/03/21 PHP
PHP面向对象程序设计之对象生成方法详解
2016/12/02 PHP
浅谈PHP各环境下的伪静态配置
2019/03/13 PHP
PHP Web表单生成器案例分析
2020/06/02 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
2008/03/22 Javascript
在网页里看flash的trace数据的js类
2009/01/10 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
2012/08/06 Javascript
浅析Node.js实现HTTP文件下载
2016/08/05 Javascript
Web前端框架bootstrap实战【第一次接触使用】
2016/12/28 Javascript
JavaScript Base64 作为文件上传的实例代码解析
2017/02/14 Javascript
vue2.0实现导航菜单切换效果
2017/05/08 Javascript
浅谈vue后台管理系统权限控制思考与实践
2018/12/19 Javascript
ES6知识点整理之对象解构赋值应用示例
2019/04/17 Javascript
vue v-for 使用问题整理小结
2019/08/04 Javascript
微信小程序接入腾讯云验证码的方法步骤
2020/01/07 Javascript
[06:10]6.81新信使新套装!给你一个炫酷的DOTA2
2014/05/06 DOTA
Windows下的Python 3.6.1的下载与安装图文详解(适合32位和64位)
2018/02/21 Python
Python使用wget实现下载网络文件功能示例
2018/05/31 Python
Pytorch在dataloader类中设置shuffle的随机数种子方式
2020/01/14 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
解决pymysql cursor.fetchall() 获取不到数据的问题
2020/05/15 Python
阿里云:Aliyun.com
2017/02/15 全球购物
英国第一摩托车和摩托车越野配件商店:GhostBikes
2019/03/10 全球购物
公司总经理任命书
2014/06/05 职场文书
找工作求职信
2014/07/07 职场文书
助残日活动总结
2014/08/27 职场文书
银行反四风对照检查材料
2014/09/29 职场文书
办公室班子四风问题对照检查材料
2014/10/04 职场文书
2015年小学二年级班主任工作总结
2015/05/21 职场文书
计算机实训心得体会
2016/01/14 职场文书
2016年幼儿园教师师德承诺书
2016/03/25 职场文书
Pycharm 如何设置HTML文件自动补全代码或标签
2021/05/21 Python
springboot使用Redis作缓存使用入门教程
2021/07/25 Redis