Карусель изображений с переходом из Fade в Black

Question

Мне нужно сделать карусель с переходом затухания, который станет черным, а еще лучше - темно-серый цвет, такой как #2B303A.Я нашел этот код в сети, который отлично работает, единственная проблема в том, что эффект затухания - это действительно яркий белый цвет, который мне не нравится, и это беспокоит глаза.

Как я могу это сделать?переходить в черный цвет между изображениями?

$(document).ready(function() {

  //Carousel
  var vet_url = ["https://i.imgur.com/Bb39Qpp.jpg", "https://images.wallpaperscraft.com/image/palms_road_marking_123929_1920x1080.jpg"];
  var len = vet_url.length;
  var i = 0;

  function swapBackgrounds() {
    $("#background").animate({
      opacity: 0
    }, 700, function() {
      $($("#background")).css('background-image', 'url(' + vet_url[(i + 1) % len] + ')').animate({
        opacity: 1
      }, 700);
    });
    i++;
  }
  setInterval(swapBackgrounds, 10000);
});

#background {
  background-color: #2B303A;
  position: absolute;
  z-index: 1;
  min-height: 100%;
  min-width: 100%;
  background-image: url("https://images.wallpaperscraft.com/image/palms_road_marking_123929_1920x1080.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="background"></div>

Посмотреть на JSFiddle

Answer 1

jquery .animate не работает с фоновыми цветами, хотя может работать с: https://github.com/jquery/jquery-color

Answer 2

Установка непрозрачности на 0 позволяет увидеть элемент под каруселью, в этом случае нет ничего, кроме самого тела.background-color тела не было установлено, поэтому оно было белым по умолчанию.Установка черного цвета background-color решила проблему.

Answer 3

вам нужно сделать это для элемента html, как минимум в вашем тестовом примере.

html
{
 background-color:#2B303A;
}