jQuery中toggle与slideToggle以及fadeToggle之间的不同
toggle()方法:
定义和用法
切换元素的可见状态。如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。
语法:
$(selector).toggle(speed,callback,switch)
slideToggle()方法:
定义和用法
它通过使用滑动效果(高度变化)来切换元素的可见状态。如果被选元素是可见的,则隐藏这些元素,如果被选元素是隐藏的,则显示这些元素。
语法:
$(selector).slideToggle(speed,callback)
toggle()方法与slideToggle()方法区别在于,toggle方法的效果是从右到左,是一个横向的动作。它是通过display的状态来判断匹配元素的可见性。而slideToggle()方法的效果是从上到下,是一个竖向的动作,它是通过高度来判断匹配元素的可见性。
fadeToggle()方法:
定义和用法
fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换。
如果元素是淡出显示的,fadeToggle() 会使用淡入效果显示它们。
如果元素是淡入显示的,fadeToggle() 会使用淡出效果显示它们。
语法
$(selector).fadeToggle(speed,easing,callback)
这三个方法的参数中,参数均是可选的。第一个参数speed表示的切换两种状态的速度,可以用"slow"、"fast" 或毫秒。
参数callback表示的是动作完成后所执行函数的名称。
toggle()中的switch参数是可选的布尔值:True和False,表示toggle是否隐藏或显示所有的被选元素。若设置参数,则无法使用前两个参数。
fadeToggle()中的easing参数是可选的,表示的是在不同点上元素的速度
jQuery中toggle与slideToggle以及fadeToggle之间的不同的更多相关文章
- jQuery中toggle与slideToggle以及fadeToggle的显示、隐藏方法的比较
1.区别 ①动画效果的比较: toggle:直接显示.隐藏,如果有[时间参数]且[匹配的元素有宽度属性],则动态效果为左上角-右下角拉卷效果,透明度0-1之间的变化:若有时间参数但是[匹配的元素没有宽 ...
- jQuery-4.动画篇---动画切换的比较(toggle与slideToggle以及fadeToggle的比较)
jQuery中toggle与slideToggle以及fadeToggle的比较 操作元素的显示和隐藏可以有几种方法.例如: 改变样式display为none 设置位置高度为0 设置透明度为0 都能达 ...
- 关于jQuery中toggle()函数的使用
今天遇到一个有趣的例子,将它记录下来. 一个一级菜单,里边有一个二级菜单,二级菜单是通过锚点来链接页面元素的.想要实现的效果是当点击锚点时,页面链接到相应锚点,同时二级菜单隐藏,再点击一级菜单时,继续 ...
- jQuery中,子页面与父页面之间的调用方法
在jQuery中, 子页面查找父页面的元素 parent.$("#元素Id") 父页面调用子页面的元素 $("#子页面iframe的Id").contents( ...
- Jquery中toggle的用法详情
jquery ----toggle([speed],[easing],[fn]) 用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的click事件 如果元素是可见的,切换为隐藏的:如果元素是隐藏 ...
- jquery 中toggle的2种用法
一.在元素的click事件中绑定两个或两个以上的函数 toggle不像bind需要在后面添加"click"来绑定click触发事件,toggle本身就是click触发的(而且只能 ...
- jQuery中val()、text()、html()之间的差别
一.括号里没有值时表示取值 val获取表单中的值: text获取对象中的文本内容,不包含html标签: html获取对象中的内容,包括html标签 <!DOCTYPE HTML> & ...
- jQuery中 :first、:first-child 和 :first-of-type 之间的不同
<!DOCTYPE html><html><head><meta charset="utf-8"><script src=&q ...
- 关于jQuery中toggle参数callback函数提前执行问题
通过 jQuery,您可以使用 toggle() 方法来切换 hide() 和 show() 方法. 显示被隐藏的元素,并隐藏已显示的元素: $(selector).toggle(speed,call ...
随机推荐
- eclipse项目有红叉的解决办法
eclipse项目上有红叉,说明这个项目存在一些的问题,对于这种情况需要具体来看. 1 新导入项目的红叉 如果是新导入的项目,一般红叉就只在项目名称上面有红叉,项目下的分项上面没有,这一般是由于当初项 ...
- hdfs创建删除文件和文件夹
在 hadoop 中,基于 Linux 命令可以给 hdfs 创建文件和文件夹,或者删除文件和文件夹 创建文件的命令为: hadoop fs -touch /file.txt 创建文件夹的命令为: h ...
- Java 多线程(三)—— 线程的生命周期及方法
这篇博客介绍线程的生命周期. 线程是一个动态执行的过程,它也有从创建到死亡的过程. 线程的几种状态 在 Thread 类中,有一个枚举内部类: 上面的信息以图片表示如下: 第一张图: 第二张图:把等待 ...
- 从.Net到Java学习第二篇——IDEA and start spring boot
从.Net到Java学习第一篇——开篇 所谓工欲善其事,必先利其器,做java开发也一样,在比较了目前最流行的几个java IDE(eclipse,myeclipse.IDEA)之后,我果断选择IDE ...
- redis 系列22 复制Replication (下)
一. 复制环境准备 1.1 主库环境(172.168.18.201) 环境 说明 操作系统版本 CentOS 7.4.1708 IP地址 172.168.18.201 网关Gateway 172. ...
- ReentrantLock原理学习
上文我们学习了ReentrantLock的基本用法,在最后我们留下了一个问题,ReentrantLock获取的锁是什么锁呢?本文我们就从源码的角度来一探究竟.本文涉及到的源码对应JDK版本为1.8. ...
- PC逆向之代码还原技术,第二讲寻找程序入口点
PC逆向之代码还原技术,第二讲寻找程序入口点 一丶简介 程序逆向的时候.我们需要知道程序入口点.动态分析的时候以便于看是什么程序编写的. 比如VC++6.0 我们可以写一个程序测试一下 我们写一段代码 ...
- RDIFramework.NET ━ .NET快速信息化系统开发框架 V3.2 新增解压缩工具类ZipHelper
在项目对文件进行解压缩是非常常用的功能,对文件进行压缩存储或传输可以节省流量与空间.压缩文件的格式与方法都比较多,比较常用的国际标准是zip格式.压缩与解压缩的方法也很多,在.NET 2.0开始,在S ...
- curl 错误总结
证书域名与访问的域名不一致 问题:curl SSL: certificate subject name 'luffichen_server.tencent.com' does not match ta ...
- Docker Compose 原理
Docker 的优势非常明显,尤其是对于开发者来说,它提供了一种全新的软件发布机制.也就是说使用 docker 镜像作为软件产品的载体,使用 docker 容器提供独立的软件运行上下文环境,使用 do ...