JQuery动画在双击时停止mid-div

Question

我使用以下代码创建了一个div的滑动列表：

<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>

当点击相应的箭头时，溢出应该保持隐藏并且div滑动以显示下一个/上一个div。这是我的代码的简化版本，用于向前移动磁贴：

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
}

}

代码工作正常，但如果我在箭头上按得太快，则div不会滑动适当的长度。相反，他们在一定程度上滑动，让我陷入一半可见的div。

Answer 1

我使用Malk的评论及其附加链接对我的代码进行了以下添加：jQuery animation detect if animating?

function nextTile() {
     var tileWidth = /*Width of each div*/;
     var position = parseInt($(".tile").css("right"));
     position += tileWidth;
     var rightPosition = position + "px";
     var tileLock = $(".tile").is(':animated'); // new code
     if (tileLock === false)                    // new code
          $(".tile").animate({right:rightPosition}); 
}