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. 【Azure Developer】通过Azure提供的Azue Java JDK 查询虚拟机的CPU使用率和内存使用率

    问题描述 在Azure上创建虚拟机(VM)后,在门户上可以查看监控指标(Metrics),如CPU Usage,Memory,Disk I/O等.那如何通过Java 代码获取到这些指标呢? 关于VM ...

  2. PHP判断字符串所属编码：ASCII、GB2312、GBK、UTF-8、ISO-8859-1

    ASCII: ASCII的编码范围为0-127(十六进制:0x00-0x7F),判断函数: function isasciistr($str){ for($i=0;$i<strlen($str) ...

  3. OGG报错：Cannot load ICU resource bundle 'ggMessage', error code 2 - No such file or directory

    [oracle@dgdb1 ~]$ ggsci Oracle GoldenGate Command Interpreter for OracleVersion 11.2.1.0.3 14400833 ...

  4. MySQL01-数据库概述

    1.概述 1.1 什么是数据库? 用于存储和管理数据的仓库. 1.2 数据库的特点: 1. 持久化存储数据的.其实数据库就是一个文件系统 2. 方便存储和管理数据 3. 使用了统一的方式操作数据库 - ...

  5. ES6、ES7、ES8

    ES6 https://es6.ruanyifeng.com/   ES7 1.Array.prototype.includes() includes()作用,是查找一个值在不在数组里,若是存在则返回 ...

  6. vue插值 v-cloak

    vue插值 v-cloak 使用VUE时,页面刷新时会出现闪动的现象(即在插值时会显示两侧的 {}) 先定义一个VUE 通过选择器在style中定义v-cloak的display值为none 再在元素 ...

  7. Javascript JQuery select选择之Safari与Firefox

    发现在苹果IOS手机及Safari浏览其中,如下代码不工作. $("#users option[value='hello']").attr("selected" ...

  8. 泡面不好吃，我用了这篇k8s调度器，征服了他

    1.1 调度器简介 来个小刘一起 装逼吧 ,今天我们来学习 K8的调度器 Scheduler是 Kubernetes的调度器,主要的任务是把定义的 pod分配到集群的节点上,需要考虑以下问题: 公平: ...

  9. 同一个UITextField 根据不同状态下弹出不同类型键盘遇到的坑

    一,需求:有多个选项按钮,点击不同的按钮,textfield内容需求不同弹出对应需求的键盘类型. 二,问题:1.刚开始在按钮状态改变后设置 self.textField.keyboardType属性完 ...

  10. C#未能找到路径“\bin\roslyn\csc.exe”的一部分。

    主要原因是因为两个库存在,需要生成一个 roslyn文件,但是这个项目是从 vs2017中,打开的,所以,没有必要存在它. 那么就删除这两个关联的库,就可以达到目的 S2017 打开  程序包管理控制 ...