Как fadeIn / fadeOut H1 & Background на петле, используя JS

Question

В настоящее время я использую приведенный ниже скрипт для того, чтобы перенести фоновое изображение моего героя в H1 на некоторый промежуток времени. Тем не менее, я также хотел бы fadeIn / fadeOut изображения и H1.

var counter = 1; //instantiate a counter
var max = 3; //the total number of images that are available
var quotes = [
  "Unleash Your Airline",
  "Evolve Your Airport",
  "Solutions For You"
];
setInterval(function() {
  document.querySelector('header').style.backgroundImage = "url('img/bg/" + (counter + 1) + ".jpg')";
  $('#image').find('h1').fadeIn().text(quotes[counter]);
  if (counter + 1 == max) {
    counter = 0;
    //reset to start
  } else {
    ++counter; //iterate to next image
  }
}, 10000);

<header id="image" class="cb-slideshow header section parallax image-background center-bottom cover overlay gradient gradient-54 alpha-30 color-1" style="min-height: 650px; background-image: url('img/bg/1.jpg')">
        <div class="divider-shape">
            <!-- waves divider -->
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none" class="shape-waves" style="left: 0; transform: rotate3d(0,1,0,180deg);">
                <path class="shape-fill shape-fill-1" d="M790.5,93.1c-59.3-5.3-116.8-18-192.6-50c-29.6-12.7-76.9-31-100.5-35.9c-23.6-4.9-52.6-7.8-75.5-5.3c-10.2,1.1-22.6,1.4-50.1,7.4c-27.2,6.3-58.2,16.6-79.4,24.7c-41.3,15.9-94.9,21.9-134,22.6C72,58.2,0,25.8,0,25.8V100h1000V65.3c0,0-51.5,19.4-106.2,25.7C839.5,97,814.1,95.2,790.5,93.1z" />
            </svg>
        </div>
        <div class="container overflow-hidden">
            <div class="row">
                <div class="col-md-10 col-lg-8 mt-4 mb-5">
                    <h1 class="display-4 color-1 bold text-md-left mb-0">Unleash Your Airline</h1>
                    <span class="display-4 d-block light mb-4 text-md-left">With XXXXXXX</span>
                    <p class="lead mb-4 text-md-left">Increase your revenue and delight your customers with our patented software. Sell more of what you want to sell, the way you want to sell.</p>
                    <nav class="nav mt-5">
                        <a href="#" class="nav-link mr-5 pr-4 pl-4 p-2 btn btn-rounded btn-lg btn-warning">Start now </a>

                    </nav>
                </div>
            </div>
        </div>
    </header>