jQuery的淡入和淡出简单介绍
2019-08-12 13:24
1876 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_42625143/article/details/99297039
在jQuery中的一些特效中,可以通过四个方法来实现元素的淡入淡出,这四个方法分别是:fadeIn()、fadeOut()、fadeToggle() 以及 fadeTo(),下面为分别为大家介绍各个方式的使用。
jQuery fadeIn() 用于淡入已经被隐藏的元素,例子:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jquery淡入</title> 6 <style> 7 *{margin:0;padding:0;} 8 div{width:50px;height:50px;margin:10px;display:none;} 9 #div1{background: green;} 10 #div2{background: orange;} 11 #div3{background: yellow;} 12 </style> 13 <!-- jquery自己引入就好,我这里的是jquery-1.12.0.min.js --> 14 <script type="text/javascript" src="jquery-1.12.0.min.js"></script> 15 <script type="text/javascript"> 16 $(document).ready(function(){ 17 $("button").click(function(){ 18 $("#div1").fadeIn(); 19 $("#div2").fadeIn(1000); 20 $("#div3").fadeIn("slow"); 21 }); 22 }); 23 </script> 24 </head> 25 <body> 26 <p>实例演示了 fadeIn()不同参数的效果。</p> 27 <button>点击淡入 div 元素。</button> 28 <div id="div1"></div> 29 <div id="div2"></div> 30 <div id="div3"></div> 31 </body> 32 </html>
jQuery fadeOut() 用于淡入已经被隐藏的元素,例子:
-------------------------------------------------------------------- 注:如果你对python感兴趣,我这有个学习Python基地,里面有很多学习资料,感兴趣的+Q群:895817687 -------------------------------------------------------------------- 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jquery淡出</title> 6 <style> 7 *{margin:0;padding:0;} 8 div{width:50px;height:50px;margin:10px;} 9 #div1{background: green;} 10 #div2{background: orange;} 11 #div3{background: yellow;} 12 </style> 13 <!-- jquery自己引入就好,我这里的是jquery-1.12.0.min.js --> 14 <script type="text/javascript" src="jquery-1.12.0.min.js"></script> 15 <script type="text/javascript"> 16 $(document).ready(function(){ 17 $("button").click(function(){ 18 $("#div1").fadeOut(); 19 $("#div2").fadeOut(1000); 20 $("#div3").fadeOut("slow"); 21 }); 22 }); 23 </script> 24 </head> 25 <body> 26 <p>实例演示了 fadeIn()不同参数的效果。</p> 27 <button>点击淡出 div 元素。</button> 28 <div id="div1"></div> 29 <div id="div2"></div> 30 <div id="div3"></div> 31 </body> 32 </html>
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>fadeToggle()切换</title> 6 <style> 7 *{margin:0;padding:0;} 8 div{width:50px;height:50px;margin:10px;} 9 #div1{background: green;} 10 #div2{background: orange;} 11 #div3{background: yellow;} 12 </style> 13 <!-- jquery自己引入就好,我这里的是jquery-1.12.0.min.js --> 14 <script type="text/javascript" src="jquery-1.12.0.min.js"></script> 15 <script type="text/javascript"> 16 $(document).ready(function(){ 17 $("button").click(function(){ 18 $("#div1").fadeToggle(); 19 $("#div2").fadeToggle(1000); 20 $("#div3").fadeToggle("slow"); 21 }); 22 }); 23 </script> 24 </head> 25 <body> 26 <p>实例演示了 fadeToggle() 不同参数的效果。</p> 27 <button>点击切换 div 元素。</button> 28 <div id="div1"></div> 29 <div id="div2"></div> 30 <div id="div3"></div> 31 </body> 32 </html>
jQuery fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>fadeTo透明度</title> 6 <style> 7 *{margin:0;padding:0;} 8 div{width:50px;height:50px;margin:10px;} 9 #div1{background: green;} 10 #div2{background: orange;} 11 #div3{background: yellow;} 12 </style> 13 <!-- jquery自己引入就好,我这里的是jquery-1.12.0.min.js --> 14 <script type="text/javascript" src="jquery-1.12.0.min.js"></script> 15 <script type="text/javascript"> 16 $(document).ready(function(){ 17 $("button").click(function(){ 18 $("#div1").fadeTo("slow",0.15); 19 $("#div2").fadeTo("slow",0.4); 20 $("#div3").fadeTo("slow",0.7); 21 }); 22 }); 23 </script> 24 </head> 25 <body> 26 <p>实例演示了 fadeTo不同参数的效果。</p> 27 <button>点击fadeTo透明度 div 元素。</button> 28 <div id="div1"></div> 29 <div id="div2"></div> 30 <div id="div3"></div> 31 </body> 32 </html>
相关文章推荐
- jQuery 语法简单介绍和入门学习
- jquery的proxy方法的简单介绍
- JQuery的选择器的简单介绍
- Jquery制作--焦点图淡出淡入
- 快速解决jquery之get缓存问题的最简单方法介绍
- jQuery 语法简单介绍和入门学习
- JQuery中的bind、delegate、on、live方法的区别及简单介绍
- JQuery中的bind、delegate、on、live方法的区别及简单介绍
- jQuery简单介绍---从不懂到爱上他
- jQuery 语法简单介绍和入门学习
- [JQuery小笔记]淡出淡入
- 基于Jquery实现焦点图淡出淡入效果
- jQuery 语法简单介绍和入门学习
- jquery淡入,淡出
- jQuery简单介绍
- Jquery的简单介绍
- jquery_简单介绍
- 快速解决jquery之get缓存问题的最简单方法介绍
- JS及jQuery获取各种宽度、高度的简单介绍以及判断滚动条滚动到底部事件
- Jquery fadeOut淡出 fadeIn 淡入 fadeTo指定透明度