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. 消灭星星的数组高效率算法（c++代码，控制台程序）

    #include <iostream> using namespace std; #define ROW 12 #define COL 10 class Star { public: en ...

  2. vmware虚拟机Windows 2003上网问题

    近期须要在Windows 2003 上面做点操作,于是安装虚拟机玩了一下,发现并不能上网,最后的解决的方法是: 卸载IE增强的安全配置 控制面板→加入或删除程序→加入/删除Windows组件" ...

  3. WebGoat学习（一）--环境搭建

    参考https://www.owasp.org/index.php/Category:OWASP_WebGoat_Project https://github.com/WebGoat/WebGoat ...

  4. 第一个C#控制台程序

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  5. 关于SQL分页存储过程的分析

    建 立一个 Web 应用,分页浏览功能必不可少.这个问题是数据库处理中十分常见的问题.经典的数据分页方法是:ADO 纪录集分页法,也就是利用ADO自带的分页功能(利用游标)来实现分页.但这种分页方法仅 ...

  6. js对象基础写法练习

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. [Anuglar & NgRx] StoreRouterConnectingModule

    Always treat Router as the source of truth When we use Ngrx, we can see that we will use a "Sto ...

  8. Javascript：存储和读取cookie

    Cookie是网页开发中的一项重要技术,用于在本地存储一些信息(如username,password.登录状态)以便用户下一次訪问时使用(或在其他页面使用). cookie的格式是键值对,多个键值对之 ...

  9. vue-cli 和webpack

    https://note.youdao.com/share/?id=d1851db9f0fe0a691798fac823849564&type=notebook#/C045BC3E7DC144 ...

  10. Bitmap Image Graphics

    Bitmap Image  Graphics private void DrawImagePointF(PaintEventArgs e){ // Create image.    Image new ...