jquery - 使用 jQuery fadeIn() 和 fadeOut() 交错背景图像

Question

我使用以下函数制作具有淡入和淡出效果的图像幻灯片。

var project_photos = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
var project_photo_index = 0;

function nextPhoto() {
  $('#background').fadeOut();
  $('#background').css('background-image', 
    "url('images/" + project_photos[project_photo_index] + "')");
  $('#background').fadeIn();
  timer = setTimeout(function() {
    if (project_photo_index+1 > project_photos.length) {
      project_photo_index = 0;
    } else {
      project_photo_index++;
    }
    nextPhoto();
  }, 5000);
}

但是，我想稍微调整一下该函数以删除 fadeOut() 之间的白色时​​刻。和fadeIn() 。我想要实现的是:

假设淡入淡出时间为400ms，每张图像的显示时间为5s

1. 图像 1 在屏幕上显示 0 到 5 秒，从 5 到 5.4 秒开始淡出
2. 图像2首先隐藏，从4.8s到5.2s开始淡入(为了填补淡入和淡出之间的白色间隙)，从5.2到10.2s保持，然后从10.2到10.6s开始淡出
3. 图像3首先隐藏，从10.4s到10.8s开​​始淡入，从10.8s到15.8s保持，然后从15.8s到16.2s开始淡出
4. (图 1 以类似的逻辑返回，永远循环，直到计时器清零)

如何调整代码以使其按描述的方式工作？

Answer 1

LIVE DEMO

如果您使用 2 个 DIV 元素，您可以淡出内部元素:

<div id="bg2"><div id="bg1"></div></div>

这就是您所需要的:

var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'],
    n = images.length,
    c = 0,
    $1 = $('#bg1'),
    $2 = $('#bg2');

$.fn.setBG = function(){
  return this.css({backgroundImage: "url(images/"+ images[c] +")"});
};

(function loop(){
  $1.setBG().fadeTo(0,1).delay(2000).fadeTo(1000, 0, loop);
  c = ++c%n;
  $2.setBG();
})();

这是如何工作的:

#bg1:      set1 -- fadeOut -- set2 -- fadeOut -- set3 -- fadeOut -- set1 - ...
#bg2:      - set2 ------------- set3 ------------- set1 ------------- set2 ...