<!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. PHP配置环境中如何开启伪静态

    1.在httpd.conf中引入httpd-vhosts.conf 2.在httpd.conf中开启mod_rewrite.so 3.在httpd-vhosts.conf中配置虚拟主机 AllowOv ...

  2. 为什么DW的可视化下看到的效果与浏览器的效果有所区别？

    可视区不是调用外面浏览器,Dreamweav 可视化区是为用户编辑而设计. 支持最基本的 HTML 与 CSS ,对 CSS 而言,我写入样式时如果你使用最基本的样式时它显示与你浏览器中看的效果相差不 ...

  3. 注解2 --- 自定义 Annotation --- 技术搬运工（尚硅谷）

    定义新的 Annotation 类型使用 @interface 关键字 自定义注解自动继承了java.lang.annotation.Annotation接口 Annotation 的成员变量在 An ...

  4. vs2015卸载、vs2008安装Visual Assist x

    卸载2015 参考博文 1. 手动卸载VS2015的主要部分: win10系统: 控制面板---程序和功能--Microsoft Visual Studio 2015---更改卸载 2. 下载工具并解 ...

  5. JavaScript--取消a标签和form的submit提交默认行为

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Servlet小结（转载）

    http://www.iteye.com/topic/766418 1 .首先,什么是Servlet?        Servlet是一个Java编写的程序,此程序是在服务器端运行的,是按照Servl ...

  7. get请求url中带有中文参数出现乱码情况

    在项目中经常会遇到中文传参数,在后台接收到乱码问题.那么在遇到这种情况下我们应该怎么进行处理让我们传到后台接收到的参数不是乱码是我们想要接收的到的,下面就是我的一些认识和理解. get请求url中带有 ...

  8. day40-Spring 02-事务的回顾

  9. 【JZOJ4824】【NOIP2016提高A组集训第1场10.29】配对游戏

    题目描述 流行的跳棋游戏是在一个有m*n个方格的长方形棋盘上玩的.棋盘起初全部被动物或障碍物占满了.在一个方格中,'X'表示一个障碍物,一个'0'-'9'的个位数字表示一个不同种类的动物,相同的个位数 ...

  10. hdu1503 LCS

    题意:如果有相同的字母,这些字母只输出一次.其余的都输出. 先做一次LCS,标记相同的字母,然后回溯输出. #include<stdio.h> #include<string.h&g ...