title: Fixing a jQuery animation to slide images onto the screen
body: <p>I have an animation going here that slides in 3 images onto the screen, holds them there for 30 seconds then slides them back off screen.</p>
  
  <p>My issue currently is, Image 2 will only slide on screen once Image 1 has fully completed it's slide-in animation, and same thing with Image 3 waiting for Image 2 to fully slide in.  I want to try to make this animation a bit more 'fluid' looking.</p>
  
  <p>All my images are <strong><code>400px</code></strong> in length.  How can I start sliding image 2 into view once image 1 has crossed the <strong><code>200px</code></strong> line (50% on screen) instead of it having to wait for image 1 to be 100% on screen.  And then do the same thing for image 3 as well, start it sliding in once image 2 has moved 200px to the left.</p>
  
  <p>Here's a simple image to possibly help better illustrate what I want to do here:</p>
  
  <p><a href="https://i.stack.imgur.com/pVjJo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pVjJo.png" alt="enter image description here"></a></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-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function(){
    
    var slideOutTime=1000; // Time it takes to slide onto the screen
    var slideInTime=1000;  // Time it takes to slide off screen
    var slideInAfterTime=30000;  // Hold position on screen for 30 seconds then slide off screen
    var repeatSlidingTime=90000;  // Repeat animation after this amount of time
    
    
    function slideImage(img){
      
      img.animate({left:'0px'},slideOutTime,function(){
        var nxt=img.next();
        if(nxt.length&gt;0){
          slideImage(nxt);
        }else{
          setTimeout(function(){startSliding();},repeatSlidingTime);
        }
        setTimeout(function(){slideBack(img);},slideInAfterTime);
      });
    
      }
    
    function slideBack(img){
       img.animate({left:'-400px'},slideInTime);
    }
    
    function startSliding(){
      slideImage($('.slide:first'));
      }
    
    startSliding();
  
  });
  
  &lt;/script&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;style&gt;
              .wrapper {
                  position: relative;
                  overflow: hidden;
                  width: 500px;
                  height: 500px;
              }
  
              .slide {
                left:-400px;
                  position: absolute;
                  width: 400px;
                  height: 75px;                
              }
            .slide:nth-child(2) {top:60px;}
            .slide:nth-child(3) {top:120px;}
  
     
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="wrapper"&gt;
            &lt;img class="slide" src="http://i.imgur.com/4JqfxNO.png" /&gt;
            &lt;img class="slide" src="http://i.imgur.com/ehdAPjk.png" /&gt;
            &lt;img class="slide" src="http://i.imgur.com/yQ51oro.png" /&gt;
          &lt;/div&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Basically just trying to start moving an image into view once the previous image has reached 50% on screen instead of waiting for it to be 100% on screen and then starting its animation.</p>