事件不起作用后重置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来解决此问题，该工具允许链接动画以及此类项目的许多其他有用功能。