我试着在jQuery和CSS中做淡化背景,这是我的代码 - 但它不起作用。有什么想法吗?
var images = ['bg.jpg', '_4.jpg', '_5.jpg', '_6.jpg'];
var i = 0;
setInterval(function(){
$('body').animate({opacity: 0}, 'slow', function() {
$(this)
.css('background-image', function() {
if (i >= images.length) {
i=0;
}
return 'url(' + images[i++] + ')';
});
.animate({opacity: 1});
});
}, 1000);
});
答案 0 :(得分:0)
你可以为背景颜色设置动画,但不能为背景图像设置动画,我也会在这面墙上击败我的头部。
请参阅此处 - Fade in new background images on scroll
正如在我的问题的答案中,您需要使用带有负z-index的<img>
并淡化它们。
我是怎么做到的 -
CSS
#img1, #img2, #img3, #img4 {
width:100%;
height:100%;
display:none;
position:fixed;
z-index:-1;
}
的jQuery
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 150) {
$('#img2').fadeIn();
}
else {$('#img2').fadeOut('fast')};
if (y > 300) {
$('#img3').fadeIn();
}
else {$('#img3').fadeOut('fast')};
if (y > 450) {
$('#img4').fadeIn();
}
else {$('#img4').fadeOut('fast')};
});
答案 1 :(得分:0)
setInterval(function(){
$('.light').animate({opacity: 0}, 4000, function() {
$('.light').css({background:'url(./images/' + images[i++] + ') no-repeat top center'}).animate({opacity: 1},4000);
if (i >= images.length) { i=0; }
});
}, 4000);
这个必须工作我在div上尝试这个