Here is the working demo.
<http://jsfiddle.net/Evqqp/1/>

Please check the demo to easily understand the issue. Click on the arrows fast and you will see the view mess up.

I understand it might be because of the 300ms animation i do. What is a clean way to handle the clicks such that it does not mess up the view. I can use a flag to check if the previous click action is complete. But i wanted to seek opinions if there is a better way to do this.

Code where i do the animate 

```
$(".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();
    }
});

```

Thank you