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. AcWing 326. XOR和路径

    大型补档计划 题目链接 如果整体来做,发现既有加法,也有整体异或,这样不容易搞. 考虑异或,各个位置互不干扰,按位考虑一下. 枚举每一位 \(k\) 发现如果设 \(f[u]\) 为这一位的期望结果还 ...

  2. 基于Fisco-Bcos的区块链智能合约-简单案例实践

    一.智能合约介绍 智能合约是指把合同/协议条款以代码的形式电子化地放到区块链网络上.FISCO BCOS平台支持两种智能合约类型:Solidity智能合约与预编译智能合约 Solidity与Java类 ...

  3. OpenResty&Canal

    OpenResty&Canal OpenResty 提供缓存功能 封装了Nginx,并且提供了Lua扩展,大大提升了Nginx的并发处理能力10k~1000k Nginx限流 1.控制速率 2 ...

  4. Pytest 系列（27）- allure 命令行参数

    如果你还想从头学起Pytest,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1690628.html 先看看 allure 命令的帮助文 ...

  5. CSS-backgroound和radial-giadient的常见用法

    前言 这里主要介绍下css中background和radial-giadient径向渐变的使用,工作中用到的地方可能也不太多,但是每次用到了都需要查阅官网,查资料就比较麻烦,这里记录一下我自己整理的常 ...

  6. 第一次软件工程与UML的编程作业

    博客班级 https://edu.cnblogs.com/campus/fzzcxy/2018SE1/ 作业要求 https://edu.cnblogs.com/campus/fzzcxy/2018S ...

  7. flink安装及standalone模式启动、idea中项目开发

    安装 环境 Ubuntu 18 jdk8 flink-1.8.1 安装步骤 安装jdk(略) 下载flink-1.8.1-bin-scala_2.12.tgz,解压到指定目录 wget http:// ...

  8. Linux简单复习

    cd 命令:切换目录 ls命令:用于浏览目录下的文件或者文件夹 rm 命令:用于删除文件或者目录,用法 rm –rf test.txt (-r表示递归,-f表示强制) cp 命令:用于拷贝文件,用法, ...

  9. Application Data in Docker 笔记

    Application Data in Docker By default all files created inside a container are stored on a writable ...

  10. ADF 第六篇：Copy Data Activity详解

    在Azure 数据工程中,可以使用Copy Data 活动把数据从on-premises 或云中复制到其他存储中.Copy Data 活动必须在一个IR(Integration Runtime)上运行 ...