Javascript 我需要在这个JQuery动画中填补一个空白

以下是我的Jquery代码：

var img = function() { 
    $(".slider#1").delay(1000).fadeIn(1000); 
    $(".slider#1").delay(3000).fadeOut(1000);
    $(".slider#2").delay(5000).fadeIn(2000); 
    $(".slider#2").delay(3000).fadeOut(1000); 
    $(".slider#3").delay(10000).fadeIn(2000); 
    $(".slider#3").delay(3000).fadeOut(1000); 
    $(".slider#4").delay(15000).fadeIn(2000); 
    $(".slider#4").delay(3000).fadeOut(1000, function() { img() }); 
}; 

---

基本上，我想做的是当一个图像淡出时，我希望一个图像几乎在它后面，并直接淡入其中，而不在中间留下空白，这是可能的吗？

您可以使用jQuery

fadeTo

功能

像

并使所有滑块彼此重叠，不透明度为0

编辑： 你可以试试这把小提琴：

它递归地改变不透明度。所有图像都位于彼此的顶部，然后淡出级别1，然后淡出级别2，然后淡出两个图像（因为级别3位于底部）。当您看到代码时，可能会更好地理解

JavaScript

HTML

---

您必须对动画进行排队，否则它们会在一段时间后混淆，因为您的动画正在运行异步

我确实堆叠了所有的图像，并且所有的图像都是可见的（您可以设置z-index只是为了确定）。 淡出最上面的，下一个出现了。 最底层，不必褪色。在再次重置/显示所有其他图像并重置递归之前，我再次淡入第一个图像

---

jsfiddle

---

js

---

我尝试了这个方法，但是它会加载第一个图像，但是第二个图像不会加载。这里有一个回调参数，可以让它递归加载。我一到家就拉小提琴。

$(".slider#1").fadeTo(1000,1);

var max = 3
var min = 1
var showTime = 1500

function fade(num) {
  if (num > min) {
    $('.' + num).delay(showTime).fadeTo("slow", 0, function() {
      fade(num - 1);
    });
  } else {
    $("div").delay(showTime).fadeTo("slow", 1, function() {
      fade(max)
    });
  }
}
fade(3);

<div id="img1" class="1"></div>
<div id="img2" class="2"></div>
<div id="img3" class="3"></div>

#img1 {
    width:100px;
    height:100px;
    background-color:red;
    position:absolute;
    top:0;
    left:0;
    opacity :1;
    z-index :1;
}
#img2 {
    width:100px;
    height:100px;
    background-color:blue;
    position:absolute;
    top:0;
    left:0;
    opacity :1;
    z-index :2;
}
#img3 {
    width:100px;
    height:100px;
    background-color:green;
    position:absolute;
    top:0;
    left:0;
    opacity :1;
    z-index :3;
}

var images = ['.slider1', '.slider2', '.slider3', '.slider4']; // .slider4 is always visible

var img = function (i, showtime, fadetime) {
    $(images[i]).delay(showtime).fadeOut(fadetime).queue(function () {
        i++;
        if (i < images.length-1) { // run through images
            img(i, showtime, fadetime);
            $.dequeue(this);
        } else { // reset animation
            $(images[0]).delay(showtime).fadeIn(fadetime).queue(function () {
                $(".slide").fadeIn(0);
                img(0, showtime, fadetime);
                $.dequeue(this);
            });
            $.dequeue(this);
        }
    });
};

img(0, 1000, 1000);  

<div class="slide slider4"></div>  
<div class="slide slider3"></div>  
<div class="slide slider2"></div>  
<div class="slide slider1"></div>  

.slide {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50px;
    left: 50px;
}
.slider1 {
    background-color: black;
}
.slider2 {
    background-color: green;
}
.slider3 {
    background-color: blue;
}
.slider4 {
    background-color: red;
}