JQuery animation stops mid-div on double click

I created a sliding list of divs using the following code :

<div class="row">
    <img class="back-arrow">
    <div class="hide-extra">
    <div class="tile-container">
                <div class="tile"></div>
                <!-- More Divs -->
    </div>
    </div>
    <img class="next-arrow">
</div>

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:

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
}

}

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.