我想在我的网站中更改一个具有淡入效果的图像。问题是我正在为同一个div使用两个不同的类,所以实际上我想淡出一个类,同时在第一个类完全删除之前开始淡入第二个类。
HTML:
<div id="background_image" class="day"></div>
CSS:
.day{
background: url(day.png);
}
.night {
background: url(night.png);
}
JQuery的:
setTimeout(function(){
if($("#background_image").hasClass("day")){
$("#background_image").fadeOut(function() {
$(this).removeClass("day");
});
$("#Landscape").fadeIn(function() {
$(this).addClass("night");
});
}else{
$("#background_image").fadeOut(function() {
$(this).removeClass("night");
});
$("#Landscape").fadeIn(function() {
$(this).addClass("day");
});
}
}, 5000);
但是这段代码使图像“day.png”首先完全消失,然后“night.png”来了,这不是我想要的。 有没有办法淡出课堂“日”并开始淡化它“夜晚”,而褪色之间没有空白?提前致谢
答案 0 :(得分:1)
似乎你要做的就是交叉褪色。这通常使用2个div来完成。如果这是针对整个背景,那么我建议http://srobbin.com/jquery-plugins/backstretch/。如果您不需要它来覆盖整个背景,您可以查看它们的实现,将其缩小到div。
这是我为类似案例解决的问题。
var images = [
"/content/images/crane1.jpg",
"/content/images/crane2.jpg",
"/content/images/crane-interior.jpg"
];
// The index variable will keep track of which image is currently showing
var index = 0;
// Call backstretch for the first time,
// In this case, I'm settings speed of 500ms for a fadeIn effect between images.
$.backstretch(images[index], { speed: 500 });
// Set an interval that increments the index and sets the new image
// Note: The fadeIn speed set above will be inherited
setInterval(function () {
index = (index >= images.length - 1) ? 0 : index + 1;
$.backstretch(images[index]);
}, 5000);
编辑: 对于非完整背景,请查看此帖子Crossfade Background images using jQuery
另外,请看一下,可能更接近您的情景Cross fade background-image with jQuery