title: Changing background-images with a fade inbetween
body: <p>I'm trying to change the background images of my hero section with JS. The loop is working but I'm not sure how to have one image fade into the next.</p>
  <p>The way that it is currently set up makes it fade to white (the background colour) inbetween changes, rather than fading from one image to the next.</p>
  <pre><code>var images = [&quot;../images/winter.jpeg&quot;, &quot;../images/spring.jpeg&quot;, &quot;../images/summer.jpeg&quot;, &quot;../images/welcome.jpeg&quot;];
  var index = 0;
  
  function changeBackground() {
  
    index = (index + 1 &lt; images.length) ? index + 1 : 0;
  
    $('.hero').fadeOut(0, function () {
  
      $(this).css('background-image', 'url(' + images[index] + ')')
  
      $(this).fadeIn(0);
  
    });
  };
  
  var timer = null;
  
  function startSetInterval() {
    timer = setInterval(changeBackground, 2000);
  }
  // start function on page load
  startSetInterval();
  
  $('.link-block-animation').hover(
    function () {
      clearInterval(timer);
    },
    function () {
      timer = setInterval(changeBackground, 2000);
    });
  </code></pre>