jQuery的淡入和淡出简单介绍
程序员文章站
2023-11-18 10:17:16
通过四个方法来实现元素的淡入淡出,这四个方法分别是:fadeIn()、fadeOut()、fadeToggle() 以及 fadeTo() ......
在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() 用于淡入已经被隐藏的元素,例子:
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>
下一篇: javascript原型与原型链个人理解