jQuery --- 第四期 (jQuery動效)
阿新 • • 發佈：2019-04-29
div 引用 slide nbsp 不透明度 width tle charset 彈窗
學習筆記
1.jQuery動畫的淡入淡出
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery動畫的淡入淡出</title> <style> body{background-color: #EBEBEB} div{ width :200px; height :200px; background-color :red; display :none; }</style> <!--引用jquery庫--> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <script type="text/javascript"> $(function(){ //動畫淡入 $("button").eq(0).click(function(){ $("div").eq(0).fadeIn(2000,function(){ }); });//動畫淡出 $("button").eq(1).click(function(){ $("div").eq(0).fadeOut(2000,function(){ }); }); //淡出入切換 $("button").eq(2).click(function(){ $("div").eq(0).fadeToggle(2000,function(){ }) }); //允許漸變為指定的不透明度（0-1） $("button").eq(3).click(function(){ $("div").eq(0).fadeTo(2000,0.5,function(){ }) }); }); </script> </head> <body> <button>fadeIn</button> <button>fadeOut</button> <button>fadeToggle</button> <button>fadeTo</button> <div></div> </body> </html>
2.jQuery廣告彈窗
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery彈窗廣告</title> <!--適應移動端--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--css樣式--> <style> body{background-color: #EBEBEB} div{ width :200px; height :200px; background-color :red; position :fixed; right :0; bottom :0; display:none; } .span{ width:40px; height:20px; position:absolute; background-color:green; right:0; top:0; } </style> <!--引用jquery庫--> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <script type="text/javascript"> $(function(){ //監聽關閉span $(".span").click(function(){ $("div").fadeOut(1000); }); //按照動畫隊列依次執行 $("div").stop().slideDown(1000).fadeOut(500).fadeIn(1000); }); </script> </head> <body> <div> <span class="span">關閉</span> </div> </body> </html>
jQuery --- 第四期 (jQuery動效)