【JQ】toggle / slideToggle / fadeToggle 的区别
<!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 的区别的更多相关文章
- 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设计 的宗旨是“ ...
- 关于JQ toggle 的注意事项
1.9.1以后的版本,好像不支持 jq 的 toggle function的用法啦.
- JQ中 trigger()和triggerHandler()区别
既然使用了trigger和triggerHandler,那么你应该了解了他们的差别了. trigger():在每一个匹配的元素上触发某类事件. triggerHandler():这个特别的方法将会触发 ...
- 2、jQuery的基本概念-必看-版本-入口函数- jq对象和dom对象区别
1.4. jQuery的版本 官网下载地址:http://jquery.com/download/ jQuery版本有很多,分为1.x 2.x 3.x 大版本分类: 1.x版本:能够兼容IE678浏览 ...
- JQ first-child与:first的区别以及nth-child(index)与eq(index)的区别
1.first-child和:first区别 first-child 是指选取每个父元素的第一个子元素 如$("div:first-child")指每个父级里的第一个div孩子 ...
- angular 和jq 的AJAX的请求区别
最近项目中使用angular,结果发现后台没法获取参数,所以,稍微研究了一下两者在发送ajax时的区别. 注意angular和jquery的ajax请求是不同的. 在jquery中,官方文档解释con ...
- jq的slideToggle效果
slideToggle() 方法通过使用滑动效果(高度变化)来切换元素的可见状态. 如果被选元素是可见的,则隐藏这些元素,如果被选元素是隐藏的,则显示这些元素. 例子:一个简单的下拉菜单效果----& ...
- jq size()与length的区别
size()跟length同样的功能,都是取元素的个数,那么他们的区别是什么呢,一个是方法一个是属性? 从图中可以看到size()方法比length慢38%,原因何在? size: function ...
- JQ Ajax 同步与异步的区别
$.ajax({ url: xml_addr, type: 'get', dataType: 'xml', timeout: 1000, //设定超时 cache: false, //禁用缓存 asy ...
随机推荐
- 【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) ...
- web前端学习(二)html学习笔记部分(3)--range对象
1.2.8 html5编辑api之range对象(一) 1.2.8.1 Range 对象基本概念 Range 对象的基本概念,通过使用 Range 对象所提供的方法实现一个鼠标选取内容,通过点击按 ...
- Codeforces 451D
题目链接 D. Count Good Substrings time limit per test 2 seconds memory limit per test 256 megabytes inpu ...
- golang函数二
- 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 ...
- idea启动报错:Access denied for user 'root '@'192.168.100.XXX' (using password: YES)
Caused by: org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean wit ...
- 学习JDK1.8集合源码之--Vector
1. Vector简介 Vector是JDK1.0版本就推出的一个类,和ArrayList一样,继承自AbstractList,实现了List.RandomAccess.Cloneable.java. ...
- Vue. 之 npm安装Element
Vue. 之 npm安装Element 前提: 相关运行环境以搭建完成,例如:Node.Npm等. 假如我的项目目录如下: D:\DISK WORKSPACE\VSCODE\CDS\cds-ap ...
- ORACLE 所有 表 记录 条数
SELECT TABLE_NAME,TO_NUMBER(EXTRACTVALUE(XMLTYPE(DBMS_XMLGEN.GETXML('SELECT COUNT(*) CNT FROM '||TAB ...
- 2018-9-2-WPF-开发自动开机启动程序
title author date CreateTime categories WPF 开发自动开机启动程序 lindexi 2018-09-02 15:10:52 +0800 2018-9-2 14 ...