jqueryアニメーションリセット後にイベントが動作しない

Question

私はこの要素をアニメーション化するために完全に動作するスクリプトを持っていますが、関数がタイマーの後に再び呼び出されたとき、要素は必要な位置に移動します。返送されたデータは、より多くの/少ない船舶やさまざまな種類が含まれていますので、私はアニメーションのすべてをクリアし、新しいものを開始しようとしています

関数updateFlights（）{

var sector = window.localStorage.getItem("sector"); 
     $.ajax({ 
      type  : 'POST', // define the type of HTTP verb we want to use (POST for our form) 
      url   : 'http://192.168.1.112/www/php/galaxy/getFlights.php', // the url where we want to POST 
      data:{ sector : sector, tiles : 'true' }, // our data object 
      dataType : 'json', // what type of data do we expect back from the server 
      encode   : true 
     }) 
      .done(function(data) { 
       if (! data.success) { 
         console.log('ajax error'); 
       } 
       else{ 


      console.log(data); 
      var keys = Object.keys(data['flight']).length; 

      for(i=0;i<keys;i++){ 

       $("#ship"+i).finish(); 
       console.log('clear'); 
      } 
      $("#flightsBox").html(" "); 
      $("#lineBox").html(" "); 

      for (i=0; i<keys; i++){ 
       if(data['flight'][i].ended){} 
       else{ 

         var lineColor = 'white'; 
         if(data['flight'][i]['type'] == 0){ 
          lineColor = 'yellow'; 
         } 
         if(data['flight'][i]['type'] == 1){ 
          lineColor = 'yellow'; 
         } 
         if(data['flight'][i]['type'] == 2){ 
          lineColor = 'red'; 
         } 
         if(data['flight'][i]['type'] == 3){ 
          lineColor = 'red'; 
         } 
         if(data['flight'][i]['type'] == 4){ 
          lineColor = 'blue'; 
         } 



         var startX = parseInt(data['flight'][i]['xPos']); 
         var endX = parseInt(data['flight'][i]['endX']); 

         var startY = parseInt(data['flight'][i]['yPos'])-10; 
         var endY = parseInt(data['flight'][i]['endY']); 

         var startX1 = parseInt(data['flight'][i]['xPos']); 
         var endX1 = parseInt(data['flight'][i]['endX'])-10; 

         var startY1 = parseInt(data['flight'][i]['yPos']); 
         var endY1 = parseInt(data['flight'][i]['endY'])-10; 

          // DRAW LINE 
          $('.lineBox').line(startX1, startY1, endX, endY, {color: lineColor, stroke:1, zindex:1001}); 


         if(data['flight'][i].type == 4){ 

          // ANIMATE RETURN SHIP 
          $(".flightsBox").append("<div class='shipMove4' id='ship"+data['flight'][i]['id']+"'></div>"); 
          $("#ship"+data['flight'][i]['id']).css({ 
           'top' : endY1, 
           'left' : endX1 
          }); 

          $("#ship"+data['flight'][i]['id']).animate({ 
           'left' : startX, 
           'top' : startY 
          }, data['flight'][i]['remainingTime'], "linear" 
          ); 

         } 
         else{ 


          // ANIMATE SHIP 
          $(".flightsBox").append("<div class='shipMove"+data['flight'][i]['type']+"' id='ship"+data['flight'][i]['id']+"'></div>"); 
          $("#ship"+data['flight'][i]['id']).stop(true).css({ 
           'top' : startY, 
           'left' : startX 
          }); 

          $("#ship"+data['flight'][i]['id']).animate({ 
           'left' : endX1, 
           'top' : endY1 
          }, data['flight'][i]['remainingTime'], "linear" 
          ); 
         } 
       } 
     } 
     } 

     }); 

}

。

おかげ

Answer 1

私はこのタイプのプロジェクトのための連鎖アニメーションや他の有用な機能の多くを可能にvelocity.jsを使用してこれを解決しました。