クリックした場所に要素移動＆移動中に座標（当たり判定）をもたせる

javascriptで当たり判定を実装しようとしています。とりあえず、作ってみたところ当たり判定はもっているようですが、移動の途中では当たり判定がなくなっているというか、座標だけ先に移動して
画像が後からついてきているようです、、、
改善しようとして、checkPoint関数を追加してみたのですが改善せず、、、
移動にかかる時間（約1秒間）の間に0.1秒ごとに今現在画像が存在するところに座標を設定させたいです。よろしくお願いします！

javascript
1//移動処理開始
2     (function(){
3         var container = document.getElementById("container");
4         var ball =  document.getElementById("ball");
5         console.log("setting");
6      }());
7
8     container.addEventListener("click",checkHit,false);
9     function checkHit(){
10           var x = event.x - container.clientWidth*0.04,
11               y = event.y - container.clientHeight*0.3,
12               ball = document.getElementById("ball"),
13               left = ball.style.left,
14               leftNum = left.slice(0,left.length-2),
15               top = ball.style.top,
16               topNum = top.slice(0,top.length-2),
17               ballDistance = Math.sqrt(Math.pow(leftNum,2)+Math.pow(topNum,2));
18               ball.style.transition = ballDistance*1.5 + "ms";
19               ball.style.left = x + "px";
20               ball.style.top = y + "px";
21   //移動処理終了   
22  //当たり判定調査開始
23         var object = document.getElementsByClassName("object");
24        
25         (function(){
26                var ballData = ball.getBoundingClientRect();
27                console.log(ballData);
28             for(i=0;i<4;i++){
29               var objectData = object[i].getBoundingClientRect();
30                 
31    
32            if(
33                Math.abs(x - objectData.left) < (ballData.width + objectData.width)/2 
34                && 
35                Math.abs(y - objectData.top) < (ballData.height + objectData.height)/2
36            ){
37                  hitted();
38                 }
39                
40             }
41             
42         }());
43     }
44     //当たり判定調査終了
45
46　　//移動中にしようとした処理
47      setInterval(checkPoint,50)
48         function checkPoint(){
49          var ballData = ball.getBoundingClientRect();
50         ball.style.left = ballData.left;
51          console.log(ball.style.left);   
52     }
53     
54　　　//当たった時の処理
55    function hitted(){
56console.log("hitted");
57    }

html
1//移動範囲
2<div id="container">
3        ////当たり判定を持つもの
4               <div id = haricontainer>
5                <div id="oclock" class="object pic" ></div>
6                <div id="minute"
7                     class="object pic"></div>
8                   <div id="second" class="object pic" ></div>
9　　　　　　　　　　　　//捜査対象
10                   <div id="ball" class="object pic" ></div>
11                </div>
12            
13  </div>