javascript - 我需要填补这个 JQuery 动画中的空白

Question

这是我的 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() }); 
}; 

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

Answer 1

您可以使用 jQuery fadeTo 函数。

喜欢

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

并使所有 slider 相互重叠，不透明度为 0。

编辑:

你可以试试这个 fiddle : http://jsfiddle.net/8cwA6/22/

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

JavaScript

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);

HTML

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

CSS

#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;
}