title: How can i add fadeOut or fadeIn animation to my JS function
body: <p>My goal is to add the fadeIn or fadeOut animation to the function called changePicture().
  The issue I came across is that i dont know how to add the animation every time after one number of the array runs. For example: images[0] runs and i want the animation to run right after it because im being left out with the linear gradient color (which is some sort of gray) before another image comes across and it just looks horrible.
  Any help or hints would be appreciated!</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let i = 0;
  let images = [];
  let slideTime = 3000;
  
  images[0] = 'images/banner-bg.jpg'
  images[1] = 'images/banner-bg2.jpg'
  images[2] = 'images/banner-bg3.jpg'
  images[3] = 'images/banner-bg4.jpg'
  images[4] = 'images/banner-bg5.jpg'
  
  function changePicture(){
      document.getElementById('banner').style.backgroundImage = "linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),url(" + images[i] + ")";
  
      if (i &lt; images.length - 1) {
          i++;
      } else {
          i = 0;
      }
      setTimeout(changePicture, slideTime);
  }
  window.onload = changePicture;</code></pre>
  </div>
  </div>
  </p>