【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 ...
随机推荐
- 五.反馈(Hopfield)神经网络
前馈网络一般指前馈神经网络或前馈型神经网络.它是一种最简单的神经网络,各神经元分层排列.每个神经元只与前一层的神经元相连.接收前一层的输出,并输出给下一层,数据正想流动,输出仅由当前的输入和网络权值决 ...
- QT_获取运行进程所在目录路径_1
QString getProcessPathForWin(int idProcess) { #ifdef Q_OS_WIN // access process path WCHAR name[]; Z ...
- Latex 出现编辑公式，出现错误 !pdfTex error: Font rntxmi7 at 438 not found
http://docs.miktex.org/manual/advanced.html http://www.cl-projects.de/projects/misc/miktex-fonts.pht ...
- CSS3圆环旋转效果
html结构: <div class="demo"></div> css结构: .demo{ width:250px; height:250px; bord ...
- Linux常用命令2 权限管理命令
1.权限管理命令:chmod 上面图片中的ugoa与rwx并不是一个命令,而是不同选项 u 所有者 g 所属组 o 其他人 a 所有人 r 读取权限 w写入权限 x 执行权限 chmod u+x ...
- 【JZOJ4924】【NOIP2017提高组模拟12.17】向再见说再见
题目描述 数据范围 =w= 设h[i]表示,甲队得到i分的方案数. 那么h[(n+k)/2]和h[(n−k)/2]就是答案. 设g[i]表示,甲队得到至少i分的方案数. 那么h[i]=g[i]−∑j& ...
- 威胁快报|首爆，新披露Jenkins RCE漏洞成ImposterMiner挖矿木马新“跳板”
简介 阿里云安全于近日捕获到一起使用Jenkins RCE漏洞进行攻击的挖矿事件.除挖矿外,攻击者还曾植入具有C&C功能的tsunami木马,也预留了反弹shell的功能,给用户带来极大安全隐 ...
- bzoj4033 树上染色
Description 有一棵点数为N的树,树边有边权.给你一个在0~N之内的正整数K,你要在这棵树中选择K个点,将其染成黑色,并 将其他的N-K个点染成白色.将所有点染色后,你会获得黑点两两之间的距 ...
- java读取properties文件总结
一.java读取properties文件总结 在java项目中,操作properties文件是经常要做的,因为很多的配置信息都会写在properties文件中,这里主要是总结使用getResource ...
- 从零学React Native之12 组件的生命周期
一个React Native组件从它被加载,到最终被卸载会经历一个完整的生命周期.所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键. ES6语法和之前的ES5 ...