javascript - 快速单击会导致幻灯片 View 无法正常工作？

这是工作演示。
http://jsfiddle.net/Evqqp/1/

请检查演示以轻松了解问题。快速单击箭头，您将看到混乱的视图。

我了解这可能是因为我做了300毫秒的动画。有什么干净的方法可以处理单击，从而不会使视图混乱。我可以使用一个标志来检查上一个单击操作是否完成。但是我想征询意见，是否有更好的方法可以做到这一点。

我在哪里做动画的代码

$(".rightArrow").on("click", function () {
    if ((Math.abs(parseInt($(".slideBox").css("margin-left"))) + $(".mainDiv").width()) < $(".slideBox").width()) {
        $(".slideBox").animate({
            "margin-left": parseInt($(".slideBox").css("margin-left")) - $(".mainDiv").width()
        }, 300, checkRightArrow);
        $(".leftArrow").show();
    } else {
        $(".rightArrow").hide();
    }
});

谢谢

最佳答案

检查您的元素当前是否使用以下动画

if(!$('#myElement').is(':animated'))
{
    // Do your animation here
}