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. 从零开始的xxe学习

    本文介绍了一个菜鸡对xxe的一步步学习(内容多来源于大佬的博客,先感谢一波) 涉及知识点: (1)xxe 目录: 解析: 1.xxe是什么(不详解了,网上很多的) XXE(XML External E ...

  2. jenkins+git部署环境，出现Failed to connect to repository : Command "git ls-remote -h http://gitlab.xxxxx.git HEAD" returned status code 128stdout: stderr: fatal: repository 'http://gitlab.xxxxx.git' not fou

    1.部署jenkins+git源码管理的方式,源码管理报128stdout 源码管理出现如下错误: Failed to connect to repository : Command "gi ...

  3. 从输入 URL 到页面展示，这中间发生了什么？

    当面试官问到,请你说说看"从输入 URL 到页面展示,这中间发生了什么?" 以前的我是这样回答的: 用户输入URL后,向服务器端发起请求.如果顺利,得到网络响应之后,浏览器对资源进 ...

  4. angular 双向数据绑定与vue数据的双向数据绑定

    二者都是 MVVM 模式开发的典型代表 angular 是通过脏检测实现,angular 会将 UI 事件,请求事件,settimeout 这类延迟的对象放入到事件监测的脏队列,当数据变化的时候,触发 ...

  5. 【题解】AcWing 389. 直径

    原题链接 题目描述 共两个问题,第一问求树的直径长度,第二问求直径的必须边 思路 第一问很好求,lyd书里有,就不再赘述. 这里建议使用两次bfs的方法,因为关系到第二问的路径,这么做比较方便. 然后 ...

  6. 详解双向链表的基本操作(C语言)

    @ 目录 1.双向链表的定义 2.双向链表的创建 3.双向链表的插入 4.双向链表的删除 5.双向链表更改节点数据 6.双向链表的查找 7.双向链表的打印 8.测试函数及结果 1.双向链表的定义 上一 ...

  7. html 08-HTML5详解（二）

    08-HTML5详解(二) #本文主要内容 拖拽 历史 地理位置 全屏 #拖拽 如上图所示,我们可以拖拽博客园网站里的图片和超链接. 在HTML5的规范中,我们可以通过为元素增加 draggable= ...

  8. Numpy的学习6-深浅赋值（copy&deep copy）

    # = 的赋值方式会带有关联性 import numpy as np a = np.arange(4) # array([0, 1, 2, 3]) b = a c = a d = b # 改变a的第一 ...

  9. 【Git】命令思维导图

    Git命令思维导图

  10. python中函数的初览

    资料参考来源:https://www.cnblogs.com/haifeima/p/9595449.html 现在听到函数这两个字时还会头疼一会,因为我想到的是数学中的函数,但python中的函数不会 ...