jQuery动画在双击时停止距离中期

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>

当单击相应的箭头时，溢出应保持隐藏状态，而Divs幻灯片则显示下一个/上一个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
}

}

代码正常工作，除非我在箭头上按太快按下，divs不会滑动适当的长度。取而代之的是，他们滑动了一部分，让我陷入了一半的可见。

Answer 1

我使用malk的评论和他的附加链接进行了以下添加：jQuery动画检测是否动画？

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}); 
}