为什么这个JavaScript动画只适用于一个元素，尽管每个元素的代码相同

我正在尝试建立一个简单的游戏。一个球会落下并击中一根杆，但你必须试着按球的基本颜色击球。要移动球，你必须点击两个不同的箭头。一个用于向左移动，一个用于向右移动。它们都可以工作，但由于某些原因，当右箭头被多次单击时，左箭头在单击时不起任何作用，因此不允许球再次向左移动。此问题只发生在右侧，而不是左侧。
HTML

---

完整代码：

将右：'+=25px'更改为左：'-=25x'

使用左：'-=25px'而不是右：'+=25px'。显然，Xufox比我先到了。

<div class='cont'>
  <h1 class='title'>Culor</h1>
  <div class='ball-cont'>
    <div class='ball'></div>
  </div>
  <div class='slider'>
    <div class='arLeft ar'>
      <img class='leftAr' src=''>
    </div>
    <div class='arRight ar'>
      <img class='rightAr' src=''>
    </div>
  </div>

</div>

var main = function() {
  var ball = $('.ball');
//LEFT N RIGHT
  $('.arLeft').click(function(){
    ball.animate({
      right:'+=25px'
    });
  });

  $('.arRight').click(function(){
    ball.animate({
      left:'+=25px'
    });
  });
}

$(document).ready(main);