title: jQuery: animate image to go left and right continuously
body: <p>I'm trying to get my image to move continuiously back and forth left to right but it keeps going left and never returns right.  I'm following a code that I found, I can't seem to find what I'm doing wrong.</p>
  
  <p><a href="http://jsfiddle.net/7kmmxeeg/1/" rel="nofollow">http://jsfiddle.net/7kmmxeeg/1/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
   function firstleft() {
    $(".block.first").animate({"left": "-=100px" }, 1500, "swing", firstright);
   }
   function firstright() {
    $(".block.first").animate({"right": "+=100px" }, 1500, "swing", firstleft);
   }
   firstleft();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div.container {
   position:relative; 
   background-color:rgba(149, 187, 206, 0.36);
   height:700px;
   overflow:hidden;
  }
  
  div.block {
   height:200px;
   width:200px;
   background-color:blue;
   overflow:hidden;
  }
  
  div.block.first {
   position:absolute;
   left:100px;
   top:300px;
   overflow:hidden;
  }
  
  div.block.second {
   position:absolute;
   top:10px;
   left:500px;
   background-color:green;
   overflow:hidden;
  }
  
  div.block.third {
   position:relative;
   top:350px;
   left:500px;
   background-color:red;
  }
  
  div.block.first img {
   background-size:cover;
   width:400px;
   margin-left:-100px;
  }
  
  div.block.second img {
   background-size:cover;
   width:400px;
   margin-left:-100px;
  }
  
  div.block.third img {
   background-size:cover;
   width:400px;
   margin-left:-100px;
  }</code></pre>
  <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;div class="container"&gt;
   &lt;div class="block first"&gt;
    &lt;img src="img/first.jpg"&gt; 
   &lt;/div&gt;
   
   &lt;div class="block second"&gt;
    &lt;img src="img/second.jpg"&gt;
   &lt;/div&gt;
   
   &lt;div class="block third"&gt;
    &lt;img src="img/third.jpg"&gt;
   &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>