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

最新推荐文章于 2024-06-07 09:18:52 发布

weixin_34378969

最新推荐文章于 2024-06-07 09:18:52 发布

阅读量77

点赞数

文章标签： javascript ViewUI

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、代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>演示文档</title>
 6     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
 7     <style type="text/css">
 8         input{width: 100px;height: 30px;}    
 9         #div1,#div2,#div3{width: 150px;height: 150px;border:1px solid green;margin-left: 15px;display: inline-block;background: orange}
10       </style>
11 </head>
12 <body>
13     <h3>jQuery动画效果</h3>
14     <input id="btn1" type="button" value="fadeIn">
15     <input id="btn2" type="button" value="fadeOut">
16     <input id="btn3" type="button" value="fadeToggle">
17     <input id="btn4" type="button" value="fadeTo"><br>
18         <div id="div1"></div><div id="div2"></div><div id="div3"></div>
19     <script>
20         $('#btn1').click(function(){
21             $('div').fadeIn(2000)
22         })
23         $('#btn2').click(function(){
24             $('div').fadeOut(2000)
25         })
26         $('#btn3').click(function(){
27             $('div').fadeToggle(2000)
28         })
29         $('#btn4').click(function(){
30             $('div').fadeTo(1000,0.5)
31         })
32     </script>
33 
34 </body>
35 </html>

weixin_34378969

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js进阶 13-3 jquery动画显示隐藏，滑动，淡入淡出的本质是什么

js进阶 13-3 jquery动画显示隐藏，滑动，淡入淡出的本质是什么一、总结一句话总结：分别改变display，高度，opacity透明度这三种属性。 1、fade系列函数有哪四个？fadeIn()和fadeOut()：可以使用fadeIn()方法来实现元素的淡入效果，使用fadeOut()方法来实现元素的淡出效果。语法：fadeIn([speed],[easing...
复制链接

扫一扫