title: How to animate jQuery image transition by src
body: <p>I am making image transition by replacing the "src" in the image HTML tag</p>
  
  <pre><code>&lt;img src="background0.jpg" alt="" id="bg"&gt;
  </code></pre>
  
  <p>The question is: How do I animate the transition, for example fading out the old picture and fading in the next or sliding right.</p>
  
  <p>JavaScript/jQuery</p>
  
  <pre><code>$(function ($) {
      var images = [
              'background0.jpg',
              'background1.jpg',
              'background2.jpg',
              'background3.jpg'
          ],
          amountOfImages = images.length,
          tempR = 0,
          $bg = $('#bg');
  
      for (let i = 0; i &lt; amountOfImages; i++) {
          var img = new Image(),src = images[i];
      }
  
      function fader(){
          let r = Math.floor(Math.random()*amountOfImages);
          $bg.attr('src', images[r]); //TODO: Animate the transition
          tempR = r;
      }
      fader();
  
      setInterval(fader, 5000);
  });
  </code></pre>