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. 使用XPath爬取西刺代理

    因为在Scrapy的使用过程中,提取页面信息使用XPath比较方便,遂成此文. 在b站上看了介绍XPath的:https://www.bilibili.com/video/av30320885?fro ...

  2. 【C/C++】C和C++11之enum枚举的使用细节

    作者:李春港 出处:https://www.cnblogs.com/lcgbk/p/14101271.html 目录 一.前言 二.C中的枚举(enum) 2.1 C中枚举的大小 2.2 C中枚举的取 ...

  3. 我摊牌了，大厂面试Linux就这5个问题

    说真的,这就是<我想进大厂>系列第八篇,但是Linux的问题确实很少,就这样,强行编几个没有营养的问题也没啥意义. 1.CPU负载和CPU利用率的区别是什么? 首先,我们可以通过uptim ...

  4. P5327 [ZJOI2019]语言

    一边写草稿一边做题吧.要看题解的往下翻,或者是旁边的导航跳一下. 草稿 因为可以开展贸易活动的条件是存在一种通用语 \(L\) 满足 \(u_i\) 到 \(v_i\) 的最短路径上都会 \(L\) ...

  5. AcWing 232. 守卫者的挑战

    题目链接 大型补档计划. 比较显然的dp 设 \(f[i][j][k]\) 为前 \(i\) 次,擂台上了 \(j\) 次,空闲容量(背包 - 使用的)为 \(k\) 的概率. 不上擂台的转移:\(f ...

  6. 深入理解Java虚拟机(一)——JVM内存模型

    文章目录 程序计数器 定义 作用 特点 Java虚拟机栈 定义 特点 本地方法栈 定义 Java堆 定义 特点 方法区 定义 特点 运行常量池 直接内存 总结 Java虚拟机的内存空间分为五个部分: ...

  7. bugku 之 crypto:进制转换的python脚本

    题目如下: text.txt的内容: 知识点:python怎么做进制转换 除了自己按照计算方法写一遍进制转换,可以用python自带的强制转换: int(a,num) 其中,int是转换成十进制整数类 ...

  8. 单机编排之Docker Compose

    当在宿主机启动较多的容器时候,如果都是手动操作会觉得比较麻烦而且容器出错,这个时候推荐使用docker 单机编排工具docker compose,Docker Compose 是docker容器的一种 ...

  9. Spring框架之spring-web http源码完全解析

    Spring框架之spring-web http源码完全解析 Spring-web是Spring webMVC的基础,由http.remoting.web三部分组成. http:封装了http协议中的 ...

  10. Python将word文档转换成PDF文件

    如题. 代码: ''' #將word文档转换为pdf文件 #用到的库是pywin32 #思路上是调用了windows和office功能 ''' #导入所需库 from win32com.client ...