js进阶 13-3 jquery动画显示隐藏，滑动，淡入淡出的本质是什么

一、总结

一句话总结：分别改变display，高度，opacity透明度这三种属性。

1、fade系列函数有哪四个？

  • fadeIn()和fadeOut()：可以使用fadeIn()方法来实现元素的淡入效果，使用fadeOut()方法来实现元素的淡出效果。

    语法：fadeIn([speed],[easing],[fn])/fadeOut([speed],[easing],[fn])

  • fadeToggle()通过不透明度的变化来开关所有匹配元素的淡入和淡出效果。

    语法：fadeToggle([speed,[easing],[fn]])

  • fadeTo()把所有匹配元素的不透明度以渐进方式调整到指定的不透明度

    语法：fadeTo([[speed],opacity,[easing],[fn]])

2、fadeTo的作用是什么？

fadeTo()把所有匹配元素的不透明度以渐进方式调整到指定的不透明度
语法：fadeTo([[speed],opacity,[easing],[fn]])

29         $('#btn4').click(function(){

30             $('div').fadeTo(1000,0.5)

31         })

二、jquery动画显示隐藏，滑动，淡入淡出的本质是什么

1、淡入淡出

淡入和淡出效果，本质上其实都是通过改变元素的"透明度"(opacity属性)来实现的。

  • fadeIn()和fadeOut()：可以使用fadeIn()方法来实现元素的淡入效果，使用fadeOut()方法来实现元素的淡出效果。

    语法：fadeIn([speed],[easing],[fn])/fadeOut([speed],[easing],[fn])

  • fadeToggle()通过不透明度的变化来开关所有匹配元素的淡入和淡出效果。

    语法：fadeToggle([speed,[easing],[fn]])

  • fadeTo()把所有匹配元素的不透明度以渐进方式调整到指定的不透明度

    语法：fadeTo([[speed],opacity,[easing],[fn]])

 

2、代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>演示文档</title>

     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>

     <style type="text/css">

         input{width: 100px;height: 30px;}

         #div1,#div2,#div3{width: 150px;height: 150px;border:1px solid green;margin-left: 15px;display: inline-block;background: orange}

       </style>

 </head>

 <body>

     <h3>jQuery动画效果</h3>

     <input id="btn1" type="button" value="fadeIn">

     <input id="btn2" type="button" value="fadeOut">

     <input id="btn3" type="button" value="fadeToggle">

     <input id="btn4" type="button" value="fadeTo"><br>

         <div id="div1"></div><div id="div2"></div><div id="div3"></div>

     <script>

         $('#btn1').click(function(){

             $('div').fadeIn(2000)

         })

         $('#btn2').click(function(){

             $('div').fadeOut(2000)

         })

         $('#btn3').click(function(){

             $('div').fadeToggle(2000)

         })

         $('#btn4').click(function(){

             $('div').fadeTo(1000,0.5)

         })

     </script>

 </body>

 </html>
 

js进阶 13-3 jquery动画显示隐藏，滑动，淡入淡出的本质是什么的更多相关文章

  1. jQuery基础（动画篇 animate，显示隐藏，淡入淡出，下拉切换）

    1.jQuery中隐藏元素的hide方法   让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元 ...

  2. js进阶 13 jquery动画函数有哪些

    js进阶 13 jquery动画函数有哪些 一.总结 一句话总结: 二.jquery动画函数有哪些 原生JavaScript编写动画效果代码比较复杂,而且还需要考虑兼容性.通过jQuery,我们使用简 ...

  3. js和jquery实现显示隐藏

    (选择的重要性) 当点击同一个按钮的时候实现显示影藏 <a id="link" class="b-btn-four task-resolve add-sub-tas ...

  4. js进阶 13-11/12 jquery如何实现折叠导航

    js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...

  5. js进阶 13-9/10 jquery如何实现三级列表

    js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...

  6. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

  7. js进阶---12-12、jquery事件委托怎么使用

    js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...

  8. js进阶---12-10、jquery绑定事件和解绑事件是什么

    js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...

  9. js进阶课程 12-9 jquery的事件对象event的方法有哪些？

    js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...

随机推荐

  1. js关于循环的理解

    学习任何语言都离不开循环,js也是一样,看了网上的资料,整理一份关于js循环的理解. 1.最基础循环,js和其他高级语言一样使用for.while循环 (function() { for(var i= ...

  2. Looksery Cup 2015

    A题水 C题 博弈论,如果不是CF有WA具体哪个点错了和数据的话,AC要难许多. 如果D的操作数大于奇数个数直接Win 偶数个数大于等于n – k 时,S直接Win 偶数个数小于n – k时,若D操作 ...

  3. Kinect 开发 —— 常见手势识别（上）

    悬浮按钮 (Hover Button) 悬浮按钮通过将鼠标点击换成悬浮然后等待(hover-and-wait)动作,解决了不小心点击的问题.当光标位于按钮之上时,意味着用户通过将光标悬浮在按钮上一段时 ...

  4. linux命令行打开图片

    1.用预装的eog eog a.jpg 2.安装 imagemagick display a.jpg

  5. JavaScript--数据结构与算法之散列

    散列:实现散列表的数据后可以快速地实现插入或者删除.但是对于实现查找操作则效率非常的低.散列表的底层是数组实现的,长度是预先设定,可以随时根据需求增加.所有的元素根据和该元素对应的键,保存在特定的位置 ...

  6. POJ 1061 青蛙的约会 数论水题

    http://poj.org/problem?id=1061 傻逼题不多说 (x+km) - (y+kn) = dL 求k 令b = n-m ; a = x - y ; 化成模线性方程一般式 : Lx ...

  7. 【DRF认证】

    目录 认证组件的详细用法 本文详细讲述了DRF认证组件的原理以及用法. @ * 源码剖析** 上一篇博客讲解DRF版本的时候我们都知道了,在dispatch方法里执行了initial方法来初始化我们的 ...

  8. Myeclipse学习总结（3）——Myeclipse中的代码格式化、注释模板及保存时自动格式化

    设置Myeclipse中的代码格式化.注释模板及保存时自动格式化 1:设置注释的模板: 下载此模板:  codetemplates.xml This XML file does not appear ...

  9. 洛谷——P3384 【模板】树链剖分

    https://www.luogu.org/problem/show?pid=3384#sub 题目描述 如题,已知一棵包含N个结点的树(连通且无环),每个节点上包含一个数值,需要支持以下操作: 操作 ...

  10. ORA-01653 无法在表空间扩展的解决办法 -- 增加表空间大小或给表空间增加数据文件

    转自原文 ORA-01653 无法在表空间扩展的解决办法 -- 增加表空间大小或给表空间增加数据文件 当前系统的数据量越来越大的,昨天还运行正常的数据库,突然无法使用了.经过定位发现是"OR ...