jQuery中toggle与slideToggle以及fadeToggle的显示、隐藏方法的比较
1、区别
①动画效果的比较:
toggle:直接显示、隐藏,如果有【时间参数】且【匹配的元素有宽度属性】,则动态效果为左上角-右下角拉卷效果,透明度0-1之间的变化;若有时间参数但是【匹配的元素没有宽度属性】,则动态效果为上下拉卷的效果,且没有透明度的变化。
slideToggle:切换上下拉卷滚效果,竖向变换。
fadeToggle:切换效果为淡入、淡出,只与透明度相关。
②判断方式的比较:
toggle:判断方式为匹配元素的display属性
slideToggle:判断方式为匹配元素的height属性
fadeToggle:判断方式为匹配元素的opacity属性
2、共性
①三个方法动画结束后若匹配元素隐藏,则display值都会变成”none“,不再影响页面的布局
②若同时有多个匹配元素,则这些元素不会作为一个整体实现动画,而是异步完成动画效果(同时完成)
个人学习动画效果的一些心得,如有错误或见解不到之处还望指正!
jQuery中toggle与slideToggle以及fadeToggle的显示、隐藏方法的比较的更多相关文章
- jQuery中toggle与slideToggle以及fadeToggle之间的不同
toggle()方法: 定义和用法 切换元素的可见状态.如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素. 语法: $(selector).toggle(speed,callback ...
- jQuery-4.动画篇---动画切换的比较(toggle与slideToggle以及fadeToggle的比较)
jQuery中toggle与slideToggle以及fadeToggle的比较 操作元素的显示和隐藏可以有几种方法.例如: 改变样式display为none 设置位置高度为0 设置透明度为0 都能达 ...
- jQuery中设置form表单中action的值的方法
下面介绍在jQuery中设置form表单中action的值的方法. $("#myFormId").attr("action", "userinfo.s ...
- (三)在js(jquery)中获得文本框焦点和失去焦点的方法
在js(jquery)中获得文本框焦点和失去焦点的方法 文章介绍两个方法和种是利用javascript onFocus onBlur来判断焦点和失去焦点,加一种是利用jquery $(" ...
- 关于jQuery中toggle()函数的使用
今天遇到一个有趣的例子,将它记录下来. 一个一级菜单,里边有一个二级菜单,二级菜单是通过锚点来链接页面元素的.想要实现的效果是当点击锚点时,页面链接到相应锚点,同时二级菜单隐藏,再点击一级菜单时,继续 ...
- 关于jQuery中toggle参数callback函数提前执行问题
通过 jQuery,您可以使用 toggle() 方法来切换 hide() 和 show() 方法. 显示被隐藏的元素,并隐藏已显示的元素: $(selector).toggle(speed,call ...
- Jquery 中toggle的用法举例
toggle用法是使得两个以上的方法交替出现. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
- 关于JQuery中的ajax请求或者post请求的回调方法中的操作执行或者变量修改没反映的问题
前段时间做一个项目,而项目中所有的请求都要用jquery 中的ajax请求或者post请求,但是开始处理一些简单操作还好,但是自己写了一些验证就出现问题了,比如表单提交的时候,要验证帐号的唯一性,所以 ...
- jQuery中,子页面与父页面之间的调用方法
在jQuery中, 子页面查找父页面的元素 parent.$("#元素Id") 父页面调用子页面的元素 $("#子页面iframe的Id").contents( ...
随机推荐
- Leetcode学习笔记(2)
题目1 ID面试题 01.04 给定一个字符串,编写一个函数判定其是否为某个回文串的排列之一. 回文串是指正反两个方向都一样的单词或短语.排列是指字母的重新排列. 回文串不一定是字典当中的单词. 示例 ...
- Dr.COM获取用户属性超时!请检查防火墙配置允许UDP 61440端口。怎么解决
最近校园网老是出问题,看到好多同学都遇到了下面的问题,我就来说一下我的解决方法.(目前我认识的有三个同学遇到了这样的情况,用这个方法都解决了,但不一定对每个人都有效) 首先登陆net.scut.edu ...
- js之数组乱序
这是最近面试遇到的,不过忘记了,之前也有印象刷到过这道题,就再次记录一下加深印象吧,听到最多的答案是利用sort方法,不过也有说这种方法不好,利用了快排和插入排序,那就整理下吧 <!DOCTYP ...
- 笔记-[APIO2010]特别行动队
笔记-[APIO2010]特别行动队 [APIO2010]特别行动队 \(f_i\) 表示将 \((j+1,j+2,\dots,i)\) 分为一组,已解决 \(i\) 之前的士兵的最小代价. \(a& ...
- vue-cli脚手架搭建vue3.0+typescripe项目
新开个项目,小项目,小.顺手就用vue吧,vue3出来也几个月了,直接上了吧.一年多没用vue了,用的时候也得再熟悉,不如直接干3了! vue官方推荐使用的脚手架是 Vite 和 vue-cli ,延 ...
- SQL注入 (一)
一.手工注入 注入点检测 识别方法:通过在url栏输入'.and 1=1.or 1=1.and sleep(1),如果出现报错,或者页面不一致,则可能存在注入点. 注入类型:整数型.字符型.搜索型.B ...
- Day1 字符编码及编码函数
ord() 函数 获取字符的整数表示chr() 函数 把整数编码转换为对应字符'\十六进制编码\十六进制编码' 可以将字符的整数编码使用十六进制的方式这样写Python字符串类型为str,在内存中以u ...
- 详解双向链表的基本操作(C语言)
@ 目录 1.双向链表的定义 2.双向链表的创建 3.双向链表的插入 4.双向链表的删除 5.双向链表更改节点数据 6.双向链表的查找 7.双向链表的打印 8.测试函数及结果 1.双向链表的定义 上一 ...
- JUC(三):JUC包下锁概念
线程不安全集合类 ArrayList List是线程不安全的集合类,底层是Object数组实现,初始化容量是10(其实是一个空数组,第一次扩容时,将数组扩容为10),其后每次扩容大小为当前容量的一半( ...
- 找和为K的两个元素
总时间限制:1000ms 内存限制: 65536kB 描述 在一个长度为n(n < 1000)的整数序列中,判断是否存在某两个元素之和为k. 输入 第一行输入序列的长度n和k,用空格分开. 第二 ...