1、区别

①动画效果的比较:

toggle:直接显示、隐藏,如果有【时间参数】且【匹配的元素有宽度属性】,则动态效果为左上角-右下角拉卷效果,透明度0-1之间的变化;若有时间参数但是【匹配的元素没有宽度属性】,则动态效果为上下拉卷的效果,且没有透明度的变化。

slideToggle:切换上下拉卷滚效果,竖向变换。

fadeToggle:切换效果为淡入、淡出,只与透明度相关。

②判断方式的比较:

toggle:判断方式为匹配元素的display属性

slideToggle:判断方式为匹配元素的height属性

fadeToggle:判断方式为匹配元素的opacity属性

2、共性

①三个方法动画结束后若匹配元素隐藏,则display值都会变成”none“,不再影响页面的布局

②若同时有多个匹配元素,则这些元素不会作为一个整体实现动画,而是异步完成动画效果(同时完成)

个人学习动画效果的一些心得,如有错误或见解不到之处还望指正!

jQuery中toggle与slideToggle以及fadeToggle的显示、隐藏方法的比较的更多相关文章

  1. jQuery中toggle与slideToggle以及fadeToggle之间的不同

    toggle()方法: 定义和用法 切换元素的可见状态.如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素. 语法: $(selector).toggle(speed,callback ...

  2. jQuery-4.动画篇---动画切换的比较(toggle与slideToggle以及fadeToggle的比较)

    jQuery中toggle与slideToggle以及fadeToggle的比较 操作元素的显示和隐藏可以有几种方法.例如: 改变样式display为none 设置位置高度为0 设置透明度为0 都能达 ...

  3. jQuery中设置form表单中action的值的方法

    下面介绍在jQuery中设置form表单中action的值的方法. $("#myFormId").attr("action", "userinfo.s ...

  4. (三)在js(jquery)中获得文本框焦点和失去焦点的方法

    在js(jquery)中获得文本框焦点和失去焦点的方法   文章介绍两个方法和种是利用javascript onFocus onBlur来判断焦点和失去焦点,加一种是利用jquery $(" ...

  5. 关于jQuery中toggle()函数的使用

    今天遇到一个有趣的例子,将它记录下来. 一个一级菜单,里边有一个二级菜单,二级菜单是通过锚点来链接页面元素的.想要实现的效果是当点击锚点时,页面链接到相应锚点,同时二级菜单隐藏,再点击一级菜单时,继续 ...

  6. 关于jQuery中toggle参数callback函数提前执行问题

    通过 jQuery,您可以使用 toggle() 方法来切换 hide() 和 show() 方法. 显示被隐藏的元素,并隐藏已显示的元素: $(selector).toggle(speed,call ...

  7. Jquery 中toggle的用法举例

    toggle用法是使得两个以上的方法交替出现. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  8. 关于JQuery中的ajax请求或者post请求的回调方法中的操作执行或者变量修改没反映的问题

    前段时间做一个项目,而项目中所有的请求都要用jquery 中的ajax请求或者post请求,但是开始处理一些简单操作还好,但是自己写了一些验证就出现问题了,比如表单提交的时候,要验证帐号的唯一性,所以 ...

  9. jQuery中,子页面与父页面之间的调用方法

    在jQuery中, 子页面查找父页面的元素 parent.$("#元素Id") 父页面调用子页面的元素 $("#子页面iframe的Id").contents( ...

随机推荐

  1. 落谷 P2401 不等数列

    题目链接. Solution 状态设计 设 \(f_{i, j}\) 为 \(1\) 到 \(i\) 的排列,其中有 \(j\) 个 \(\text{'<'}\) 的方案数. 状态转移 尝试从 ...

  2. 01_02_py

    1基础知识 1.自然语言 (natural language) 是人们交流所使用的语言,例如英语.西班牙语和法语.它们不是人为设计出来的(尽管有人试图这样做):而是自然演变而来. 2.形式语言 (fo ...

  3. Linux安装Mysql8.0.20并配置主从复制(一主一从,双主双从)

    1. 主从复制解释   将主数据库的增删改查等操作记录到二进制日志文件中,从库接收主库日志文件,根据最后一次更新的起始位置,同步复制到从数据库中,使得主从数据库保持一致. 2. 主从复制的作用 高可用 ...

  4. Navicat12白嫖安装

    读书人怎么能算白嫖呢 搬运链接https://my.oschina.net/ZL520/blog/3070953 链接:https://pan.baidu.com/s/1jNBO9EzTzhalMgm ...

  5. SSO的通用标准OpenID Connect

    目录 简介 OpenID Connect是什么 ID Token 请求ID Token ID Token可以做什么 Open Connect认证码授权的例子 User Info 简介 OpenID C ...

  6. Flink相对于Spark的优点

    Flink相对于Spark的优点 容错 Flink 基于两阶段提交实现了精确的一次处理语义. Spark Streaming 只能做到不丢数据,但是有重复. 反压 Flink 在数据传输过程中使用了分 ...

  7. 属于同一网段的ip是不是就在同一个局域网?

    参考文章链接: https://zhidao.baidu.com/question/350887200.html?qbl=relate_question_0&word=%D4%DA%D2%BB ...

  8. Angular实战之使用NG-ZORRO创建一个企业级中后台框架

    前言: 在之前的一篇文章已经介绍过了,公司正在使用NG-ZORRO组件库开发后台应用,并且详细的介绍了Angular开发环境的搭建和项目的创建.这篇文章就是为了让大家熟悉了解我们该如何在Angular ...

  9. Jenkins自动化部署服务器及git 提交及git tag标签版本更新流程,超详细!

    工作中部署的项目和服务器较多时就用上了Jenkins进行自动部署 优点 不用在连接单独的服务器进行更新项目,再启动项目服务的操作了 更新部署都是自动的,比较方便.适合大批量的部署 一.git流程部分 ...

  10. JAVA 实体类List<Entity >转 List<Map>

    public static <T extends IdEntity> List<Map<Object,Object>> EntityConvertMap(List& ...