Нежелательный разрыв между jquery fadeIn и FadeOut

Question

В настоящее время у меня в приложении есть встроенный слайдер, который работает с jQuery fadeIn и fadeOut. Однако между слайдами мигает фоновое изображение в течение доли секунды между белыми слайдами (что очень отвлекает).

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

The HTML выглядит так:

<div class="hero-image-row-index">
  <div class="hero-image-outer-index text-center">
    <div class="hero-image-inner-index text-center">
      <%= image_tag 'Background 1.jpg', id: "hero-image-index", class: "hero-image-index", alt: "Beautiful Sunset over Pelican Hills Golf Course and Ocean Cliffs" %>
      <%= image_tag 'Background 1.jpg', id: "hero-image-index-2", class: "hero-image-index", style: "display: none", alt: "Beautiful Sunset over Pelican Hills Golf Course and Ocean Cliffs" %>
    </div> <!-- hero-image-inner -->
  </div> <!-- hero-image-inner -->
</div> <!-- row -->

<div id="overlap-hero-image-index">
  <div class="slideshow-container">
    <div class="slides">
      <div class="slide text-center" id="slide-1">
        <h1 class="font-accent color-white mt-5 mb-4" style="font-size: 52px">Genetic Golf</h1>
        <h2 class="color-white">We&nbsp;don't&nbsp;guess, we test to find what works best&nbsp;for&nbsp;you!</h2>
      </div> <!-- slide 1 -->

      <div class="slide text-center" id="slide-2" style="display: none; border-bottom: thick #567e3a solid; background-color: white">
        <h2 style="color: black; padding-top: 20px; padding-bottom: 20px">The greatest golfers of all time have different swings.<br>None of them have the perfect swing!</h2>
        <%= image_tag 'ss01.jpg' %>
        <%= image_tag 'ss02.jpg' %>
        <%= image_tag 'ss03.jpg' %>
      </div> <!-- slide 2 -->

      <div class="slide text-center" id="slide-3" style="display: none; border-bottom: thick #567e3a solid; background-color: white">
        <h2 style="color: black; padding-top: 20px; padding-bottom: 20px">The great ones have a swing that matched their body and mind.<br>They unlocked their genetic golf code.</h2>
        <%= image_tag 'ss04.jpg' %>
        <%= image_tag 'ss05.jpg' %>
        <%= image_tag 'ss06.jpg' %>
      </div> <!-- slide 3 -->

      <div class="slide text-center" id="slide-4" style="display: none; border-bottom: thick #567e3a solid; background-color: white">
        <h2 style="color: black; padding-top: 20px; padding-bottom: 20px">Genetic Golf is a true paradigm shift in learning golf.<br>We run specific tests to find what works best for you!</h2>
        <%= image_tag 'ss07.jpg' %>
        <%= image_tag 'ss08.jpg' %>
        <%= image_tag 'ss09.jpg' %>
      </div> <!-- slide 4 -->

      <div class="slide text-center" id="slide-5" style="display: none; border-bottom: thick #567e3a solid; background-color: white">
        <h2 style="color: black; padding-top: 20px; padding-bottom: 20px">A golf swing has over 2 billion options.<br>Genetic Golf takes out the guess work.</h2>
        <%= image_tag 'ss10.jpg' %>
        <%= image_tag 'ss11.jpg' %>
        <%= image_tag 'ss12.jpg' %>
      </div> <!-- slide 5 -->

      <div class="slide text-center" id="slide-6" style="display: none; border-bottom: thick #567e3a solid; background-color: white">
        <h2 style="color: black; padding-top: 20px; padding-bottom: 20px">You can spend a lifetime searching for&nbsp;your&nbsp;swing<br>or take a simple Genetic Golf&nbsp;evaluation.</h2>
        <%= image_tag 'icon_yourid.png' %>
        <%= image_tag 'icon_dynamics.png' %>
        <%= image_tag 'icon_TEMP_yourcode.jpg' %>
      </div> <!-- slide 6 -->

      <div class="slide text-center" id="slide-7" style="display: none">
        <h2 style="color: white; padding-top: 30px; font-weight: bold">Unlock your personal Genetic Golf code today!</h2>
        <h2 style="font-size: 40px; color: white; font-weight: bolder; padding-top: 10px; padding-bottom: 20px">Find your game!<br>Great shots, great days,<br>and great memories!</h2>
      </div> <!-- slide 7 -->
    </div> <!-- slides -->

    <div class="controller">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div> <!-- controller -->
  </div> <!-- slideshow container -->
</div> <!-- overlap hero image -->

А jQuery выглядит так:

<script>
  jQuery(document).ready(function($) {
    // Hides all images except for one, the one is given by an
    // index. Also updates the controller.
    function showSlide(index) {
      $('.slides .slide').each(function(i) {
        if (i == index) {
          $(this).delay(400).fadeIn(500);
        } else {
          $(this).fadeOut(500);
        }
      });

      var spans = $('.controller span').removeClass('active');
      spans.eq(index).addClass('active');
    }

    // Show only the first element and set an interval to
    // continue to cycle through elements.
    var index = 0;
    showSlide(index);

    var intervalFunc = function() {
      index = index >= $('.slides .slide').length ? 0 : index + 1;
      showSlide(index);
    };
    var interval = setInterval(intervalFunc, 6000);

    // Handle clicks which will reset the interval to each time.
    $('.controller span').click(function() {
      // Set the current picture.
      index = $(this).index();
      showSlide(index);

      // Reset the interval
      clearInterval(interval);
      interval = setInterval(intervalFunc, 6000);
    });
  });
</script>

Может кто-нибудь помочь мне избавиться от странного разрыва? Я все еще неплохо знаком с jQuery, поэтому ни одна из моих попыток устранения неполадок не сработала.

Answer 1

Вы пытались дать background-color на <div> с id overlap-hero-image-index или <div> с class slideshow-container. Это не устранит разрыв в fadeIn или fadeOut, но решит проблему с отображением фона между белыми.

#overlap-hero-image-index{
    background-color: white;
}
// OR
.slideshow-container{
    background-color: white;
}