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中实现命名空间
Nov 23 Javascript
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
Mar 22 Javascript
JQUERY 对象与DOM对象之两者相互间的转换
Apr 27 Javascript
查看图片(前进后退)功能实现js代码
Apr 24 Javascript
jquery ajax属性async(同步异步)示例
Nov 05 Javascript
分享我的jquery实现下拉菜单心的
Nov 29 Javascript
浅谈原生JS实现jQuery的animate()动画示例
Mar 08 Javascript
基于JS脚本语言的基础语法详解
Jul 22 Javascript
解决vue 按钮多次点击重复提交数据问题
May 10 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
Jul 25 Javascript
vue 项目中使用Loading组件的示例代码
Aug 31 Javascript
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
基于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判断输入不超过mysql的varchar字段的长度范围
2011/06/24 PHP
php设计模式 Interpreter(解释器模式)
2011/06/26 PHP
php中如何同时使用session和cookie来保存用户登录信息
2013/07/05 PHP
PHP信号量基本用法实例详解
2016/02/12 PHP
CI框架入门之MVC简单示例
2016/11/21 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
javascript实现的动态文字变换
2007/07/28 Javascript
jquery 框架使用教程 AJAX篇
2009/10/11 Javascript
一个XML格式数据转换为图表的例子
2010/02/09 Javascript
探讨JavaScript中声明全局变量三种方式的异同
2013/12/03 Javascript
浅析JavaScript中两种类型的全局对象/函数
2013/12/05 Javascript
javascript弹出层输入框(示例代码)
2013/12/11 Javascript
JQuery创建DOM节点的方法
2015/06/11 Javascript
javascript实现的猜数小游戏完整实例代码
2016/05/10 Javascript
jQuery Select下拉框操作小结(推荐)
2016/07/22 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
2017/07/20 Javascript
ajax请求+vue.js渲染+页面加载的示例
2018/02/11 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
2018/09/16 Javascript
Vue的属性、方法、生命周期实例代码详解
2019/09/17 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
2021/02/08 Javascript
[02:34]DOTA2英雄基础教程 幽鬼
2014/01/02 DOTA
python&amp;MongoDB爬取图书馆借阅记录
2016/02/05 Python
Python数据可视化教程之Matplotlib实现各种图表实例
2019/01/13 Python
Python和Go语言的区别总结
2019/02/20 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
Python3 虚拟开发环境搭建过程(图文详解)
2020/01/06 Python
Python抓新型冠状病毒肺炎疫情数据并绘制全国疫情分布的代码实例
2020/02/05 Python
python numpy--数组的组合和分割实例
2020/02/24 Python
python调用摄像头的示例代码
2020/09/28 Python
Django Admin后台模型列表页面如何添加自定义操作按钮
2020/11/11 Python
Python调用系统命令os.system()和os.popen()的实现
2020/12/31 Python
乡镇信息公开实施方案
2014/03/23 职场文书
律师授权委托书范本
2014/10/07 职场文书
2016年九九重阳节活动总结
2016/04/01 职场文书
乔迁新居祝福语
2019/11/04 职场文书
Android自定义scrollview实现回弹效果
2022/04/01 Java/Android