なぜこのJavaScriptアニメーションは、それぞれ同じコードであっても1つの要素に対してのみ機能します

Question

私は単純なゲームを構築しようとしています。ボールが降りて棒に当たってしまいますが、ボールが基本的に持つ色をボールに当てなければなりません。ボールを動かすには、2つの異なる矢印をクリックする必要があります。 1つは左に移動し、もう1つは右に移動するためのものです。彼らはどちらも動作しますが、何らかの理由で右矢印が何度もクリックされた場合、左矢印はクリックされても何もしないので、ボールがもう一度左に戻ることはできません。この問題は、左側ではなく、右側でのみ発生します。
HTML

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

JS

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

FULL CODE：https://jsfiddle.net/xstrgy3p/

Answer 1

変更right: '+=25px'