jquery animation reset after event not working

Question

I have this script that works perfectly to animate my elements but when the function is called again after a timer the elements go to the position they need to be but dont start a new animation.

function 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"
                            );
                        }
                }
        }   
        }

        }); 

}

I am trying to clear all of the animations and start new ones because the data that is sent back will contain more/less ships and different types.

Thanks

Answer 1

我通过使用Velocity.js来解决此问题，该工具允许链接动画以及此类项目的许多其他有用功能。