Чередование фоновых изображений с помощью 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(), Чего я хочу достичь:

при условии, что время появления и исчезновения составляет 400 мс, а время отображения каждого изображения - 5 с

1. Изображение 1 показывает на экране от 0 до 5 с, начинает исчезать с 5 до 5,4 с
2. Изображение 2 сначала скрывается, начинает постепенно исчезать с 4,8 до 5,2 с (чтобы заполнить белый промежуток между постепенным увеличением и уменьшением), удерживается от 5,2 до 10,2 с, затем начинает исчезать с 10,2 до 10,6 с.
3. Изображение 3 сначала скрывается, начинает постепенно исчезать с 10,4 с до 10,8 с, удерживается с 10,8 с 15,8 с, затем начинает исчезать с 15,8 до 16 с.
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 ...

Answer 2

Попробуйте что-то вроде

var project_photos = ['//placehold.it/128/ff0000', '//placehold.it/128/ffff00', '//placehold.it/128/00ff00', '//placehold.it/128/00ffff'];
var project_photo_index = 0;

//preload the images
$.each(project_photos, function (i, src) {
    var img = $('<img />', {
        src: src
    })
})

function nextPhoto() {
    $('#background').fadeTo('normal', .5, function () {
        $(this).css('background-image', "url('" + project_photos[project_photo_index] + "')")
        $(this).fadeTo('normal', 1)
    });

    project_photo_index++;
    project_photo_index = project_photo_index < project_photos.length ? project_photo_index : 0;

    setTimeout(nextPhoto, 5000)
}

nextPhoto();

Демо: скрипка