title: converting jquery hide/fade/delay/animation to pure js
body: <p>I am trying to remove the jquery dependency from my code and came across a few lines I have no idea how to replicate in js.</p>
  <p>I know I can use setTimeout() in place of delay, css transitions for the fading, and css for the hide... just not sure how to go about it and haven't been able to figure it out.</p>
  <p>Any help would be appreciated.</p>
  <p><strong>part in question that needs converted to plain js :</strong></p>
  <pre><code>//loop that actually does the work
  (function loopBg(){     
      $topSlide.hide().css({'background' : 'transparent url('+images[++c%n][0]+') '+images[c%n][1]}).delay(6000).fadeTo(2000, 1, function(){
          $bottomSlide.css({'background' : 'transparent url('+images[c%n][0]+') '+images[c%n][1]}); 
          loopBg();
      });
  }());
  </code></pre>
  <p><strong>entire original jquery code :</strong></p>
  <pre><code>//2nd position is where it starts from
  var images = [
      ['/assets/img/sliders/6-sm.jpg', 'no-repeat scroll center bottom / cover'],
      ['/assets/img/sliders/9-sm.jpg', 'no-repeat scroll center bottom / cover'],
      ['/assets/img/sliders/2-sm.jpg', 'no-repeat scroll center bottom / cover'],
  ];
  
  var $bottomSlide = $('#intro-anim .slider-bottom'),
      $topSlide = $('#intro-anim .slider-top'),
      n = images.length,
      c = 0; // loop counter
  
  // preload array of images
  for(var i=0; i&lt;n; i++){
      var tImg = new Image();
      tImg.src = images[i][0];
  }
  
  $bottomSlide.css({
      'background' : 'transparent url('+images[++c%n][0]+') '+images[c%n][1]
  }); 
  
  //loop that actually does the work
  (function loopBg(){     
      $topSlide.hide().css({'background' : 'transparent url('+images[++c%n][0]+') '+images[c%n][1]}).delay(6000).fadeTo(2000, 1, function(){
          $bottomSlide.css({'background' : 'transparent url('+images[c%n][0]+') '+images[c%n][1]}); 
          loopBg();
      });
  }());
  </code></pre>
  <p><strong>my conversion minus the section in question :</strong></p>
  <pre><code>//2nd position is where it starts from
  const images = [
      ['/assets/img/sliders/6-sm.jpg', 'no-repeat scroll center bottom / cover'],
      ['/assets/img/sliders/9-sm.jpg', 'no-repeat scroll center bottom / cover'],
      ['/assets/img/sliders/2-sm.jpg', 'no-repeat scroll center bottom / cover'],
  ];
  
  const bottomSlide = document.querySelector('#intro-anim .slider-bottom'),
      topSlide = document.querySelector('#intro-anim .slider-top');
  
  let n = images.length,
      c = 0; //loop counter
  
  //preload array of images
  for(let i=0; i&lt;n; i++){
      let tImg = new Image();
      tImg.src = images[i][0];
  }
  
  bottomSlide.setAttribute('style', 'background: transparent url('+images[++c%n][0]+') '+images[c%n][1]);
  
  //loop that actually does the work
  //still needs converted
  //(function loopBg(){       
  //  $topSlide.hide().css({'background' : 'transparent url('+images[++c%n][0]+') '+images[c%n][1]}).delay(6000).fadeTo(2000, 1, function(){
  //      $bottomSlide.css({'background' : 'transparent url('+images[c%n][0]+') '+images[c%n][1]}); 
  //      loopBg();
  //  });
  //}());
  </code></pre>