淡入淡出背景图像淡入淡出div内容
问题描述:
我想淡出div的背景图像时,我的图像出现在该div内的内容也淡化如何停止内容的淡入淡出效果。淡入淡出背景图像淡入淡出div内容
HTML:
<div id="background">adsdsa</div>
JS:
var bgArr = ["http://malsup.github.io/images/p1.jpg", "http://malsup.github.io/images/p1.jpg", "http://malsup.github.io/images/p2.jpg"];
var i = 0;
// Start the slide show
var interval = self.setInterval(swapBkgnd, 5000)
function swapBkgnd() {
if (i > (bgArr.length - 1)) {
i = 0
$('#background')
.animate({opacity: 0}, 'slow', function() {
$(this)
.css({'background-image': "url(" + bgArr[i] + ")"})
.animate({opacity: 1});
});
} else {
$('#background')
.animate({opacity: 0}, 'slow', function() {
$(this)
.css({'background-image': "url(" + bgArr[i] + ")"})
.animate({opacity: 1});
});
}
i++;
};
CSS:
#background {
position: absolute;
min-height: 100%;
width: 100%;
height: auto;
top: 0;
left: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
答
如果你把里面的div
内容是fadding然后哟你无法阻止内容被加入。如果您将内容放在div
之外并使用position: absolute;
对齐,则可以实现您的愿望目标。看看演示 -
var bgArr = ["http://malsup.github.io/images/p1.jpg", "http://malsup.github.io/images/p1.jpg", "http://malsup.github.io/images/p2.jpg"];
var i = 0;
// Start the slide show
var interval = self.setInterval(swapBkgnd, 1000)
function swapBkgnd() {
if (i > (bgArr.length - 1)) {
i = 0
$('#background')
.animate({
opacity: 0
}, 'slow', function() {
$(this)
.css({
'background-image': "url(" + bgArr[i] + ")"
})
.animate({
opacity: 1
});
});
} else {
$('#background')
.animate({
opacity: 0
}, 'slow', function() {
$(this)
.css({
'background-image': "url(" + bgArr[i] + ")"
})
.animate({
opacity: 1
});
});
}
i++;
};
#background {
position: absolute;
min-height: 100%;
width: 100%;
height: auto;
top: 0;
left: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
span {
position: absolute;
top:0;
left:0;
z-index: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="background"></div>
<span>adsdsa</span>