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. QQ互联账号登录

    本文说明的是依据某应用通过网页的qq信息来登录的过程.用途是利用QQ账号就能高速自己主动注冊并可以登录客户应用. 从webserver与腾讯server通信获取开房平台用户OpenID,再在应用ser ...

  2. DB2物化视图(Materialized Query Tables, MQT)

    DB2的物化视图MQT是基于查询结果定义的一个表,MQT中包括的数据来自MQT定义所基于的一个或多个表, 使用MQT能够显著提高查询的操作性能. 数据库的视图和MQT都是基于一个查询来定义的.每当视图 ...

  3. 想学android进来看看吧~ ~

    我深知学校里面有非常多同学想学习新的知识,而苦于没有指导. 事实上我想说的是,非常多东西须要靠自己,须要借助度娘,谷歌的.当然有人指导是最好的了. 对于刚接触android是不是也想做出像以下的效果: ...

  4. View State

    如何查看viewstate 鼠标右键页面,然后view page source 源码中搜索viewstate,会找到一个隐藏的字段. <input type="hidden" ...

  5. python Tricks —— list 镜像复制与 list comprehension 列表解析的顺序

    0. 对 list 镜像复制,a = [1, 2, 3] ⇒ [1, 2, 3, 3, 2, 1] a*2 ⇒ a = [1, 2, 3, 1, 2, 3] a.extend(reversed(a)) ...

  6. 如何解决Linux下的软件包依赖问题

    650) this.width=650;" border="0" alt="" src="http://img1.51cto.com/att ...

  7. 搭建 Docker 环境

  8. 【Mysql】将Excel表导入至Mysql的当中一张表

    如果表格有A(整型字段).B(整型字段).C(字符串数据)三列数据,希望导入到Mysql中数据库中表格table.table中须要插入的字段各自是col1,col2,col3 1.在随意一列,如果在D ...

  9. while 循环的理解

    if 与 while 的主要区别:if 只判断和执行一次,而 while 却代表着一个循环,执行多少次,要视情况而定: 两种情况(A.B)都会让循环体执行: while A or B: 两种情况(A. ...

  10. 31.Node.js 常用工具 util

    转自:http://www.runoob.com/nodejs/nodejs-module-system.html util 是一个Node.js 核心模块,提供常用函数的集合,用于弥补核心JavaS ...