jQuery淡入淡出动画-右下角广告
CSS display 属性
display 属性规定元素应该生成的框的类型。
| 值 | 描述 |
|---|---|
| none | 此元素不会被显示。 |
| block | 此元素将显示为块级元素，此元素前后会带有换行符。 |
| inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
| ··· | ······ |
淡入淡出动画案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.ad{
background: url("images/ad-pic.png") no-repeat;
width: 300px;
height: 194px;
position: fixed;
right: 10px;
bottom: 10px;
display: none;
}
.close{
width: 20px;
height: 20px;
position: absolute;
top: 2px;
right: 5px;
background-color: transparent;
cursor: pointer;
}
</style>
</head>
<body>
<div class="ad">
<div class="close"></div>
</div>
<script type="text/javascript" src="lib/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
/* // 1. 设置初始透明度
var opacity = 0.3;
var timer = setInterval(function () {
opacity = opacity === 1 ? 0.3 : 1;
$('.ad').fadeTo(500, opacity);
}, 500);
// 2. 关闭
$('.close').click(function () {
// 2.1 清除定时器
clearInterval(timer);
// 2.2 滑动
$(this).parent().stop(true).slideUp(1000);
});*/
// $('.ad').delay(1000).slideDown(1000);
// $('.ad').delay(1000).show(1000);
// $('.ad').delay(1000).fadeIn(1000).delay(1000).fadeOut(1000);
$(document).click(function () {
$('.ad').fadeToggle(1000);
})
});
</script>
</body>
</html>
运行效果：右下角的广告，淡入淡出（一闪一闪），并且点击广告右上角的x，广告会向下滑消失。
4768
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
