<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>JQ</title>

	<style>

		div { width: 100px; height: 100px; background: yellow; border: 1px red solid; }

	</style>

</head>

<body>

	<div></div>

	<div></div>

	<div></div>

	<input type="button" value="yes,im ok">

<!-- JS -->

<script src="js/jquery-3.2.1.min.js"></script>

<script>

$('input').click(function(){

	$('div:eq(0)').toggle(3000)

	$('div:eq(1)').slideToggle(3000)

	$('div:eq(2)').fadeToggle(3000)

})

</script>

</body>

</html>

总结：

　　toggle对整个元素的可见样式属性进行动画过渡处理

　　slideToggle对元素仅做度高过渡处理

　　fadeToggle对元素仅做透明度过渡处理

　　

【JQ】toggle / slideToggle / fadeToggle 的区别的更多相关文章

  1. java：JQuery（声明，JQ和JS对象的区别，prop，attr，addClass，offset，trigger，dblclick和change事件，hide，show，toggle，slideUp，slideDown，slideToggle，三种选择器，标签的获取，三张图片的放大与缩小）

    1.JQuery: jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计 的宗旨是“ ...

  2. 关于JQ toggle 的注意事项

    1.9.1以后的版本,好像不支持 jq 的 toggle function的用法啦.

  3. JQ中 trigger()和triggerHandler()区别

    既然使用了trigger和triggerHandler,那么你应该了解了他们的差别了. trigger():在每一个匹配的元素上触发某类事件. triggerHandler():这个特别的方法将会触发 ...

  4. 2、jQuery的基本概念-必看-版本-入口函数- jq对象和dom对象区别

    1.4. jQuery的版本 官网下载地址:http://jquery.com/download/ jQuery版本有很多,分为1.x 2.x 3.x 大版本分类: 1.x版本:能够兼容IE678浏览 ...

  5. JQ first-child与:first的区别以及nth-child(index)与eq(index)的区别

    1.first-child和:first区别 first-child  是指选取每个父元素的第一个子元素 如$("div:first-child")指每个父级里的第一个div孩子 ...

  6. angular 和jq 的AJAX的请求区别

    最近项目中使用angular,结果发现后台没法获取参数,所以,稍微研究了一下两者在发送ajax时的区别. 注意angular和jquery的ajax请求是不同的. 在jquery中,官方文档解释con ...

  7. jq的slideToggle效果

    slideToggle() 方法通过使用滑动效果(高度变化)来切换元素的可见状态. 如果被选元素是可见的,则隐藏这些元素,如果被选元素是隐藏的,则显示这些元素. 例子:一个简单的下拉菜单效果----& ...

  8. jq size()与length的区别

    size()跟length同样的功能,都是取元素的个数,那么他们的区别是什么呢,一个是方法一个是属性? 从图中可以看到size()方法比length慢38%,原因何在? size: function ...

  9. JQ Ajax 同步与异步的区别

    $.ajax({ url: xml_addr, type: 'get', dataType: 'xml', timeout: 1000, //设定超时 cache: false, //禁用缓存 asy ...

随机推荐

  1. Javascript-正则表达式常用字符集及方法

    正则表达式修饰符(修饰符 可以在全局搜索中不区分大小写) i(ignoreCase)执行对大小写不敏感的匹配 g (global)     执行全局匹配(查找所有匹配而非在找到第一个匹配后停止) m( ...

  2. spring源码学习之bean的加载（一）

    对XML文件的解析基本上已经大致的走了一遍,虽然没有能吸收多少,但是脑子中总是有些印象的,接下来看下spring中的bean的加载,这个比xml解析复杂的多.这个加载,在我们使用的时候基本上是:Bea ...

  3. 模拟7题解 T1方程的解

    方程的解 [扩展欧几里德] 首先进行特判,两个小时基本想到了,除了a!=0,b==0,a*c<0这种情况 其次就是一般情况: 首先exgcd求出ax+by=GCD(a,b)的一组任意解 然后两边 ...

  4. ip地址获取无效,自己修改ip地址

    (1)

  5. Mac 电脑如何卸载 node

    因为刚入手「 Mac 」很多淫技还不懂,在一次使用 npm install 的时候安装出错,提示为 npm 与 node 的版本有问题,所以就想着卸载重新装一个版本. 但是因为刚使用「 Mac 」所以 ...

  6. PHP学习（数据类型）

    PHP中,支持8种原始类型,其中包括四种标量类型.两种复合类型和两种特殊类型.PHP是一门松散类型的语言,不必向PHP声明变量的数据类型,PHP会自动把变量转换为自动的数据类型,一定程度降低了学习PH ...

  7. python中map、reduce函数

    map函数: 接受一个函数 f 和一个 list .格式:map( f , L),对L中的每个元素,进行f(x)的一个操作. 例如,对于list [1, 2, 3, 4, 5, 6, 7, 8, 9] ...

  8. metro扁平UI网页组件

    在线演示 本地下载

  9. oracle-Immediate

    从shutdown immediate命令发布起,禁止建立任何新的oracle连接 未提交的事务被回退.因此,处于一个事务中间的用户将失去所有未提交的劳动成果. oracle不等待客户断开连接.任何未 ...

  10. bzoj1624 寻宝之路

    Description     农夫约翰正驾驶一条小艇在牛勒比海上航行．     海上有N(1≤N≤100)个岛屿,用1到N编号．约翰从1号小岛出发,最后到达N号小岛．一张藏宝图上说,如果他的路程上经 ...