js进阶 13-3 jquery动画显示隐藏,滑动,淡入淡出的本质是什么
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>
版权申明:欢迎转载,但请注明出处
一些博文中有一些参考内容因时间久远找不到来源了没有注明,如果侵权请联系我删除。
在校每年国奖、每年专业第一,加拿大留学,先后工作于华东师范大学和香港教育大学。
2024-10-30:27岁,宅加太忙,特此在网上找女朋友,坐标上海,非诚勿扰,vx:fan404006308
AI交流资料群:753014672