title: JQuery animation stops mid-div on double click
body: <p>I created a sliding list of divs using the following code :</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;img class="back-arrow"&gt;
      &lt;div class="hide-extra"&gt;
      &lt;div class="tile-container"&gt;
                  &lt;div class="tile"&gt;&lt;/div&gt;
                  &lt;!-- More Divs --&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;img class="next-arrow"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The overflow is supposed to stay hidden and the divs slide to show the next/ previous divs when the corresponding arrows are clicked. Here's a simplified version of my code to move forward a tile:</p>
  
  <pre><code>function nextTile() {
       var tileWidth = /*Width of each div*/;
       var position = parseInt($(".tile").css("right"));
       position += tileWidth;
       var rightPosition = position + "px";
       $(".tile").animate({right:rightPosition}); //in my code each of the divs in the row move position
  }
  </code></pre>
  
  <p>}</p>
  
  <p>The code works fine except that if I press too rapidly on the arrows the divs will not slide the appropriate length. Instead they slide part way and leave me stuck with a div half visible. </p>