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. iOS8 对开发人员来说意味着什么？

    今天凌晨.Apple WWDC2014 iOS8 正式推出. 或许,对于广大iOS用户来说,iOS8的创新并非特别多. 但对于开发人员来说,影响却将会是无比巨大的! 正如Apple官网上的广告:Hug ...

  2. 阿里云Redis使用规范

    一.键值设计 1.key名设计 (1)[建议]: 可读性和可管理性 以业务名(或数据库名)为前缀(防止key冲突),用冒号分隔,比如业务名:表名:id ugc:video:1 (2)[建议]: 简洁性 ...

  3. Linux下截图技巧

           在需要Linux显示图片的场合,最普通的方法,会考虑用数码相,或是用Vmware,或VPc来抓拍,这样以来会比较麻烦,Linux也自带了些工具例如Gimp,ksnapshot这里我介绍一 ...

  4. hadoop安装报错

    1.Hadoop安装完后,启动时报Error: JAVA_HOME is not set and could not be found. 解决办法: 修改/etc/hadoop/hadoop-env. ...

  5. 【记录】无法读取配置节“AppSettings”，因为它缺少节声明

    Web.config对大小写敏感, 把AppSettings改为appSettings即可.

  6. HDU——T 4738 Caocao's Bridges

    http://acm.hdu.edu.cn/showproblem.php?pid=4738 Time Limit: 2000/1000 MS (Java/Others)    Memory Limi ...

  7. 地道的 Python（二）

    作者: Zhang Yang 列表推导 上文介绍了一个高逼格的创建字典的方法.那列表呢?依据蛋痛定律,它也一定有,可是它被起了一个很蛋痛的名字,叫列表推导: 先看看这种代码: li = [] for ...

  8. OpenStack_Swift源代码分析——ObjectReplicator源代码分析(1)

    1.ObjectorReplicator的启动 首先执行启动脚本 swift-init object-replicator start 此执行脚本的执行过程和ring执行脚本执行过程差点儿相同.找到s ...

  9. 10小时之内，暴力破解SSH账号的IP

    10小时之内,暴力破解SSH账号的IP,IP 地址数据来源于  ip138.com 182.18.76.246 北京市昌平区 北京亿安天下网络科技有限公司 联通 221.223.200.143 北京市 ...

  10. STL中向量vector笔记

    vector的本质是:数组的封装 特点:读取能在常数时间内完成 Vector成员函数 函数 表述 c.assign(beg,end) c.assign(n,elem) 将[beg; end)区间中的数 ...