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>
