1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>标题</title> 6 <script type="text/javascript" src="js/jquery-3.4.1.js"></script> 7 <style type="text/css"> 8 #ad{ 9 width: 300px; 10 height: 300px; 11 background-color: aquamarine; 12 position: fixed; 13 bottom: 0; 14 right: 0; 15 } 16 </style> 17 <script type="text/javascript"> 18 // setTimeout(function () { 19 // $("#ad").show("1000",function () { //show：显示 display:block 20 // console.log("广告动画显示完成") 21 // }); 22 // },3000); //slow慢 fast快 1000，均可添加回调函数 23 // setTimeout(function () { 24 // $("#ad").hide("1000",function () { //hide：隐藏 display:none 25 // console.log("广告已关闭") 26 // }); 27 // },5000); //slow慢 fast快 1000，均可添加回调函数 28 // $(function(){ 29 // $("#closeBtn").click(function () { 30 // $("#ad").hide(); 31 // }); 32 // }); 33 34 setTimeout(function () { 35 // $("#ad").toggle("slow"); 36 // $("#ad").slideDown(2000); //从屏幕下往上滑入 37 // $("#ad").slideToggle(2000); 38 // $("#ad").fadeIn(1000); //从屏幕中渐渐出现（透明度0-100%） 39 // $("#ad").fadeToggle(1000); 40 $("#ad").fadeTo(1000,0.5); //1S内透明度从0到0.5 41 },1000); 42 $(function () { 43 $("#closeBtn").click(function () { 44 // $("#ad").toggle("slow"); 45 // $("#ad").slideUp(2000); //从屏幕往下滑出 46 // $("#ad").slideToggle(2000); 47 // $("#ad").fadeOut(1000); //从屏幕中慢慢消失（透明度100%-0） 48 // $("#ad").fadeToggle(1000); 49 $("#ad").fadeTo(1000,0); 50 }) 51 }) //toggle相当于开关，当广告不显示时调用后显示广告，当广告显示时调用会关闭广告 52 53 </script> 54 </head> 55 <body> 56 <div id="ad" style="display: none"> 57 <button id="closeBtn">关闭</button> 58 </div> 59 </body> 60 </html>