<!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. pycharm中引入相对路径错误

    真是气死老子了,明明代码就在眼前,居然pycharm说找不到,import报错,最后才发现,需要设置代码的根目录,因此,python代码就在app目录下面,故将app设置成代码根目录就行了

  2. 【python之路15】深浅拷贝及函数

    一.集合数据类型(set):无序不重复的集合,交集.并集等功能 二.三元运算符 三.深浅拷贝 1)字符串和数字:深浅内存地址都一样 2)其他:浅拷贝:仅复制最外面第一层 深拷贝:除了最内层其他均拷贝 ...

  3. activity与fragment之间的传递数据

    首先activity之间的数据传递就是 用intent和intent+bundle intent 传递 Intent i= new Intent(MainActivity.this,TheAty.cl ...

  4. Hadoop 无法启动的问题

    最近乱搞把本来就快要挂了的hdfs又给弄坏了.问题如下, 应该是节点没有启动. [hadoop@namenode hadoop]$ hadoop dfsadmin -report Configured ...

  5. ELK学习目录

    DAY1.elasticsearch和kibana环境搭建以及简单介绍 A:环境搭建配置 (1)java虚拟机安装:https://www.cnblogs.com/studybrother/p/108 ...

  6. C++学习笔记----3.2 C++引用在本质上是什么，它和指针到底有什么区别

    从概念上讲.指针从本质上讲就是存放变量地址的一个变量,在逻辑上是独立的,它可以被改变,包括其所指向的地址的改变和其指向的地址中所存放的数据的改变. 而引用是一个别名,它在逻辑上不是独立的,它的存在具有 ...

  7. vue使用flexible和px2rem实现移动端适配

    首先下载flexible.js和px2rem npm install px2rem-loader 对webpack进行配置.进入build文件夹对utils.js中的postcssLoader做如下修 ...

  8. 第二周<导学/分类>

    分类学习 分类算法各有不同 knn naivebyes regression dnn sklearn.linear_modlel 线性函数 sklearn.preprocessing 非线性函数 分类 ...

  9. CMake学习笔记六-引用cmake文件

    include(${CMAKE_CURRENT_SOURCE_DIR}/../Share/share.cmake)

  10. 【JZOJ4792】【NOIP2016提高A组模拟9.21】整除

    题目描述 麦克雷有一个1~n的排列,他想知道对于一些区间,有多少对区间内的数(x,y),满足x能被y整除. 输入 第一行包含2个正整数n,m.表示有n个数,m个询问. 接下来一行包含n个正整数,表示麦 ...