javascript - 在完全淡出之前淡入某个类

Question

我想更改网站中的具有褪色效果的图像。问题是我对同一个 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”出现，这不是我想要的。有没有办法淡出类(class)“白天”并开始淡出“晚上”，而淡入之间没有空白？提前致谢

Answer 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