Javascript jQuery动画循环回调

我已经编写了一个名为.Ani（）的特殊函数，其工作原理类似于jquery.animate（相同的语法等只是先通过CSS运行它，然后再运行它。如果不支持转换，则使用animate）

我试图做的是允许用户传入一系列坐标，以便沿路径设置动画：

"0,0||5,5||10,10"

$(this).Ani({'top': 0, 'left': 0}, duration, easing, function() {
    // callback function
});

上面的动画只显示坐标的1，我需要通过运行相同的代码（它本身也有一个回调）来显示回调中的下一组坐标（5,5）

我已经通过不分割值等简化了上面的内容，因为我现在要完成的就是如何循环X次（坐标集的数量）并为每组坐标生成动画线。类似于：

var path="0,0||5,5||10,10",
    COORDS=path.split('||');

for(var i=0, l=COORDS.length; i<l; i++) {
   $(this).Ani({ 'top' : COORDS[i].split(',')[1], 'left' : COORDS[i].split(',')[0] }, 500, ease, function() {
      // WHEN DONE ANIMATING TO THIS LOCATION 
      // RUN THE NEXT ANIMATION FOR THE NEXT SET OF COORDINATES (5,5)
   });
};

var path=“0,0 | | 5,5 | | 10,10”，
COORDS=path.split（“| |”）；
对于（var i=0，l=COORDS.length；i您可以使
Ani
将一个函数作为参数发送到回调，该回调在调用时为下一对COORDS运行
Ani
函数，并完整地发送其余参数

$(this).Ani({'top': 0, 'left': 0}, duration, easing, function(continueFunction) {
    continueFunction();
});

另外，为什么不把
Ani
作为一个封装逻辑的对象呢？它可以简化代码并提高性能，但可以提高LOC。
我想是这样的

$.fn.Ani = function(vals, dur, ease, callback) {
    var coords = vals.split('||'),
        self   = this,
        i      = 0;

    (function fn(cooo) {
        var arr = cooo.split(',');
        self.animate({top: arr[0], left: arr[1]}, dur, ease, function() {
            if (coords[++i]) {
                fn(coords[i]);
            } else {
                callback();
            }
        });
    })(coords[i]);
}

var path = "0,0||5,5||10,10";

$(element).Ani(path, 1200, 'swing', function() {
    // complete
});

以下是我的建议：

function Animate(path, callback) {
  var animatedObject = $(this)
  var onCompleteCallback = callback || function() { };
  var COORDS=path.split('||');
  var size = COORDS.length;

  if (size === 0) {
    // maybe call onCompleteCallback(); ?
    return;
  }

  var step = COORDS[0].split(',');
  var currentStep = 0;


  function doAnimation() {
    animatedObject.Ani({ 'top' : step[1], 'left' : step[0] }, 500, ease, function() {
        ++currentStep;
        if (currentStep === size) {
           onCompleteCallback();
           return;
        }
        step = COORDS[currentStep].split(',');
        doAnimation();
    });
  }

  doAnimation();
};

只需使用以下命令调用它：
Animate（“0,0 | | | | 5,5 | | | 10,10”，在需要时调用backfunction）；