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 相关文章推荐
JS 控制小数位数的实现代码
Aug 02 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
Dec 21 Javascript
jquery 添加节点的几种方法介绍
Sep 04 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
Dec 01 Javascript
理解javascript模块化
Mar 28 Javascript
jQuery webuploader分片上传大文件
Nov 07 Javascript
为你的微信小程序体积瘦身详解
May 20 Javascript
详解webpack介绍&amp;安装&amp;常用命令
Jun 29 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
Apr 18 Javascript
vue回到顶部监听滚动事件详解
Aug 02 Javascript
原生JavaScript实现拖动校验功能
Sep 29 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_Flame(Version:Progress)的原代码
2006/10/09 PHP
PHP 中的一些经验积累
2006/10/09 PHP
c#中的实现php中的preg_replace
2009/12/21 PHP
php smarty函数扩展
2010/03/15 PHP
php 仿Comsenz安装效果代码打包提供下载
2010/05/09 PHP
浅谈PHP正则中的捕获组与非捕获组
2016/07/18 PHP
PHP SESSION机制的理解与实例
2019/03/22 PHP
基于laravel where的高级使用方法
2019/10/10 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
JavaScript窗口功能指南之在窗口中书写内容
2006/07/21 Javascript
ajaxControlToolkit AutoCompleteExtender的用法
2008/10/30 Javascript
完美解决IE低版本不支持call与apply的问题
2013/12/05 Javascript
jquery ajax跨域解决方法(json方式)
2014/02/04 Javascript
js判断页面中是否有指定控件的简单实例
2014/03/04 Javascript
浅谈jquery.fn.extend与jquery.extend区别
2015/07/13 Javascript
AngularJS入门教程之模块化操作用法示例
2016/11/02 Javascript
干货!教大家如何选择Vue和React
2017/03/13 Javascript
node.js 用socket实现聊天的示例代码
2017/10/17 Javascript
js 中rewrap-ajax.js插件实例代码
2017/10/20 Javascript
ES6数组与对象的解构赋值详解
2019/06/14 Javascript
微信小程序实现收货地址左滑删除
2020/11/18 Javascript
python修改字典内key对应值的方法
2015/07/11 Python
Python格式化日期时间操作示例
2018/06/28 Python
Python面向对象基础入门之设置对象属性
2018/12/11 Python
python矩阵的转置和逆转实例
2018/12/12 Python
python字典改变value值方法总结
2019/06/21 Python
localStorage 设置过期时间的方法实现
2018/12/21 HTML / CSS
巴基斯坦电子产品购物网站:Home Shopping
2017/09/14 全球购物
业务经理岗位职责
2013/11/11 职场文书
护理专业大学生自我推荐信
2014/01/25 职场文书
技术岗位竞聘演讲稿
2014/05/16 职场文书
2015年数学教师工作总结
2015/05/20 职场文书
检察院起诉书
2015/05/20 职场文书
使用Python+OpenCV进行卡类型及16位卡号数字的OCR功能
2021/08/30 Python
SQL Server中使用表变量和临时表
2022/05/20 SQL Server