<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>jQuery广告弹窗</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<style type="text/css">
#ad{
width:300px;
height:300px;
background-color:antiquewhite;
position:fixed;
bottom:0;
right:0;
display:none;
}
</style>
<script type="text/javascript">
// setTimeout(function(){
// // $("#ad").show();//display block none
// $("#ad").show(3000,function(){
// console.log("动画播放完成");
// });//"slow" | "fast" | 3000
// },1000);
// setTimeout(function(){
// $("#ad").hide("hide",function(){
// console.log("广告不见了");
// });
// },5000);
// $(function(){
// $("#closeBtn").click(function(){
// $("#ad").hide();
// });
// });
// $("xxxxxx").click();
setTimeout(function(){
// $("#ad").toggle("slow");
// $("#ad").slideDown(2000);//slideDown从底部向上滑动出来。
// $("#ad").slideToggle();
// $("#ad").fadeIn(1000);
// $("#ad").fadeToggle(1000);
$("#ad").fadeTo(1000,1);//0完全透明 1是完全不透明 0.5半透明
},1000);
$(function(){
$("#closeBtn").click(function(){
// $("#ad").toggle("slow");
// $("#ad").slideUp(2000);//和slideDown相反，显示完整后，从顶部向下滑动，直至没了。
// $("#ad").slideToggle();
// $("#ad").fadeOut(1000);
$("#ad").fadeToggle(1000);
});
});
</script>
</head>
<body>
<div id="ad">
<button id="closeBtn">关闭</button>
</div>
</body>
</html>
