<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.dd{
position: fixed;/*是固定定位，一窗口为参照物*/
right: 0;
bottom: 0;
width: 230px;
height: 120px;
background-image: url(img/ad.jpg) ;
display: none;
}
.dd span {
position: absolute;
right: 0;
top: 0;
width: 40px;
height: 18px;
background-image: url(img/h.jpg);
cursor: pointer;/*让光标成为一只手*/
}
</style>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(function(){
//需求：然广告ad部分，先滑入，在滑出，在淡入。然后绑定事件，点击span弹出
//步骤： slideDown 从下面往上出现 slideDown从上往下消失 fadeIn淡入
$(".dd").slideDown(1000).slideUp(1000).fadeIn(1000).children("span").click(function () {//找到span 点击时
$(this).parent().fadeOut(1000);//从父标签淡出 这里的this代表.dd这个div
});
//第二种写法
// (“.ad”).slideDown(1000, function () {
// (“.ad”).slideUp(1000, function () {
// (“.ad”).fadeIn(1000, function () {
// (“.ad”).children(“span”).click(function () {
// $(this).parent().fadeOut(1000, function () {
// alert(“执行完毕！”);
// });
// });
// });
// });
// });
});
</script>
</head>
<body>
<div class="dd">
<span></span>
</div>
</body>