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. swift 创建第一个UIAlertView 和UIActionSheet

    //创建 UIActionSheet //一定要指明类型.不编译不通过 func ActionSheet(sender:UITapGestureRecognizer)     {         le ...

  2. Android 学习笔记进阶十二之裁截图片

    package xiaosi.cut; import java.io.File; import android.app.Activity; import android.content.Intent; ...

  3. Windows共享上网的详细设置

    作者:朱金灿 来源:http://blog.csdn.net/clever101 在Windows环境下在A和B在同一个局域网上,A机子可以上网,B机子可以通过A机子可以通过设置的网络共享来上网.其中 ...

  4. js中Array.prototype.push.call的用法

    var arr = [] Array.prototype.push.call(arr,"a","b","c") <==> []. ...

  5. OpenCV —— 摄像机模型与标定

    这种理论看的已经够多了,感觉应用价值不大(矫正畸变图像还凑合,用摄像机测距神马的...) 有始有终吧,简单把内容梳理一下 针孔  摄像机模型 —— 过于理想(不能为快速曝光收集足够的光线) 透镜可以聚 ...

  6. jdbc的数据库驱动类DriverManager.getConnection()详解

    1.Oracle8/8i/9i数据库(thin模式) Class.forName("oracle.jdbc.driver.OracleDriver").newInstance(); ...

  7. SQL查询结果排序

    <第二章:查询结果排序>1:以指定的次序返回查询结果条件:显示部门10中员工名字,职位和工资并按照工资升序排列:升序asc   降序descSELECT ename,job,sal FRO ...

  8. poweroff---关闭计算机操作系统并且切断系统电源。

    poweroff命令用来关闭计算机操作系统并且切断系统电源. 语法 poweroff(选项) 选项 -n:关闭操作系统时不执行sync操作: -w:不真正关闭操作系统,仅在日志文件“/var/log/ ...

  9. 洛谷 P2958 [USACO09OCT]木瓜的丛林Papaya Jungle

    P2958 [USACO09OCT]木瓜的丛林Papaya Jungle 题目描述 Bessie has wandered off the farm into the adjoining farmer ...

  10. STM32介绍以及与通常ARM的区别

    ARM是英国的芯片设计公司,其最成功的莫过于32位嵌入式CPU核----ARM系列,最常用的是ARM7和ARM9,ARM公司主要提供IP核,就是CPU的内核结构,只包括最核心的部分,并不是完整的处理器 ...