<!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. 【Python之路22】冒泡排序算法

    1.变量互换 a = 123 b = 456 temp = a a = b b = temp python比较简单的变量互换: a = 123 b = 456 a,b = b,a print(a,b) ...

  2. web前端学习（二）html学习笔记部分（3）--range对象

    1.2.8  html5编辑api之range对象(一) 1.2.8.1  Range 对象基本概念 Range 对象的基本概念,通过使用 Range 对象所提供的方法实现一个鼠标选取内容,通过点击按 ...

  3. Codeforces 451D

    题目链接 D. Count Good Substrings time limit per test 2 seconds memory limit per test 256 megabytes inpu ...

  4. golang函数二

  5. python3.7的celery报错TypeError: wrap_socket() got an unexpected keyword argument '_context'

    原启动方法为: 起执行任务的服务 elery worker -A celery_task -l info -P eventlet 起提交任务的服务 celery beat -A celery_task ...

  6. idea启动报错：Access denied for user 'root '@'192.168.100.XXX' (using password: YES)

    Caused by: org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean wit ...

  7. 学习JDK1.8集合源码之--Vector

    1. Vector简介 Vector是JDK1.0版本就推出的一个类,和ArrayList一样,继承自AbstractList,实现了List.RandomAccess.Cloneable.java. ...

  8. Vue. 之 npm安装Element

    Vue. 之 npm安装Element 前提: 相关运行环境以搭建完成,例如:Node.Npm等.    假如我的项目目录如下: D:\DISK WORKSPACE\VSCODE\CDS\cds-ap ...

  9. ORACLE 所有 表 记录 条数

    SELECT TABLE_NAME,TO_NUMBER(EXTRACTVALUE(XMLTYPE(DBMS_XMLGEN.GETXML('SELECT COUNT(*) CNT FROM '||TAB ...

  10. 2018-9-2-WPF-开发自动开机启动程序

    title author date CreateTime categories WPF 开发自动开机启动程序 lindexi 2018-09-02 15:10:52 +0800 2018-9-2 14 ...