<!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. js经典校验之注册与登录校验

    平时都专注于后台功能的实现和逻辑需求的分析及数据库方面的设计,很少关注前端的设计,而项目开发过程中专门负责后台是不太可能的事,所以前端我们也需要会用,除了漂亮的首页等其他的交给美工来做,一些功能性的东 ...

  2. django中的路由规则

    项目的目录结构 外层的firstysite目录与Django无关,只是你项目的容器,可以任意重命名. #其中settings.py是django的总配置文件,即项目的总管家#urls.py,则是项目的 ...

  3. bzoj 3598 [Scoi2014]方伯伯的商场之旅——数位dp

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3598 TJ:https://www.cnblogs.com/Zinn/p/9351218.h ...

  4. HR招聘_(十)_招聘方法论（供应商管理）

    招聘和供应商长期合作,所以供应商管理也至关重要.供应商一般分为猎头,渠道,外包三类. 猎头 高端职位,高难度职位,急需职位和量大职位会和猎头公司合作共同完成招聘任务,猎头公司一般会有两种服务,猎头和R ...

  5. arcgis人口专题图

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. TextBlock中显示文字和图片，且不会自动换行

    原本TextBlock显示图片是很容易的,即TextBlock.Inlines.Add(UiElement   element):这个方法即可, 但是,会出现如下效果: 我不想要这种效果,所以改了下代 ...

  7. SDUT-3378_数据结构实验之查找六：顺序查找

    数据结构实验之查找六:顺序查找 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 在一个给定的无序序列里,查找与给定关键字 ...

  8. POJ2082 Terrible Sets

    Terrible Sets Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 5067   Accepted: 2593 Des ...

  9. php框架tp3.2.3和js写的微信分享功能心得，分享的标题内容图片自定义

    https://blog.csdn.net/weixin_42231483/article/details/81585322 最近用PHP的tp3.2.3框架和js写的微信分享功能心得,分享的标题内容 ...

  10. jquery 日期和时间的逻辑，比较大小

    HTML:<ul> <li> <span>到达</span> <img class="date-s" src="/p ...