<!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();
</script>
</head>
<body>
<div id="ad">
<button id="closeBtn">关闭</button>
</div>
</body>
</html>
<!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");
},1000);
$(function(){
$("#closeBtn").click(function(){
$("#ad").toggle("slow");
});
});
</script>
</head>
<body>
<div id="ad">
<button id="closeBtn">关闭</button>
</div>
</body>
</html>
显示和隐藏( 属于effect里面的basic )
show() //相当于 display:block
第一个参数slow fast 毫秒数（速度）
第二个参数是回调函数
hide()
第一个参数是速度
第二个参数是回调函数
Toggle
如果是显示的就隐藏
如果是隐藏的就显示
滑动显示和隐藏
slideDown
slideUp
参数跟上面的一样
其他显示和隐藏效果
fadeIn
fadeOut
