title: Moving element to the beginning of parent after animation
body: <p>I have a simple succession of 5 images displayed in HTML. I have animated them so that they slowly move to the right (all at the same time). </p>
  
  <p>When an image reaches the end of the screen, I want it to be pushed back to the beginning of its parent (a div tag). </p>
  
  <p>In its current shape, this animation is pushing back the last image to the first image's position and it continuously swaps images since there is always one image out of the view space. Could you be so kind as to teach me what I've done wrong?</p>
  
  <p>Here's my code: </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="sliding-box"&gt;
    &lt;img id="img1" src="http://jlwallpaper.com/wp-content/uploads/2015/11/hd_wallpapers_a13.jpg"&gt;
    &lt;img id="img2" src="http://www.planwallpaper.com/static/images/wallpapers-hd-8000-8331-hd-wallpapers.jpg"&gt;
    &lt;img id="img3" src="http://feelgrafix.com/data/wallpaper-hd/Wallpaper-HD-9.jpg"&gt;
    &lt;img id="img4" src="http://www.planwallpaper.com/static/images/Fall-wallpaper-1366x768-HD-wallpaper.jpg"&gt;
    &lt;img id="img5" src="http://www.wallpaperel.com/wp-content/uploads/2015/11/HD-Wallpaper-Pictures-A71.jpg"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.sliding-box {
      position: absolute;
      left: 10px;
      top: 10px;
  }
  
  .sliding-box img {
      position: relative;
      height: 180px;
  }
  </code></pre>
  
  <p>JQuery</p>
  
  <pre><code>$(document).ready(function() {
      function checkPos() {
          $('.sliding-box').children().each(function() {
              if(isOffscreen(this)) {
                  $(this).parent().prepend(this);
              }
          });
      }
  
      setInterval(function() {
          $('.sliding-box').children().animate({left: '+=1'}, 1);
          checkPos();
      }, 1);
  });
  
  function isOffscreen(elem) {
      var off = $(elem).offset();
      var t = off.top;
      var l = off.left;
      var h = $(elem).height();
      var w = $(elem).width();
      var docH = $(window).height();
      var docW = $(window).width();
  
      return !(t &gt; 0 &amp;&amp; l &gt; 0 &amp;&amp; t + h &lt; docH &amp;&amp; l + w &lt; docW);
  }
  </code></pre>
  
  <p>And for your convenience, a <a href="https://jsfiddle.net/zya9hap3/" rel="nofollow">Fiddle</a>.</p>
  
  <p>(Please select JQuery 2.1.4 in the Javascript window, I am not sure why it's not saving it automatically)</p>
  
  <p><strong>EDIT:</strong> This must be done in JQuery, no other extension. </p>
  
  <p><strong>EDIT2/ANSWER:</strong> Manish Mishra's solution is correct, but I have some additions. Because of the <em>relative</em> positioning of each image, the animation would become stuttered and hasty as you can see in his <a href="https://jsfiddle.net/zya9hap3/1/" rel="nofollow">fiddle</a>. My solution was to enforce <em>absolute</em> positioning to the images so that the space between them is ignored. All that remains is to figure out a way to position the images properly. Here's the updated css: </p>
  
  <pre><code>.sliding-box {
      position: absolute;
      left: 10px;
      top: 10px;
  }
  
  .sliding-box img {
      position: absolute;
      height: 180px;
  }
  
  /* I know that the following is not pretty and can be probably done */
  /* in a more elegant manner */
  
  #img1 {
  
  }
  
  #img2 {
      left: 300px;
  }
  
  #img3 {
      left: 600px;
  }
  
  #img4 {
      left: 946px;
  }
  
  #img5 {
      left: 1280px;
  }
  </code></pre>