使用JQuery获取相互播放的动画

Question

我有使用Raphaeljs库绘制的线条，并且绘制的线条的每个起点和终点坐标都保存在一个数组中并用于动画，以便动画从线条的开头移动到该行的结尾。

这仅适用于我指定的数组的一个索引。

这些是它的代码：

$("#menu_button3").click(function() {
  var start = $("#sldr");
  if (!start.hasClass('started')) {
    start.addClass('started');
    $('#sldr').css({
      "left": startx[1], //line at index 1 in the array
      "top": 160 + starty[1],
      "visibility": "visible"
    });

    $("#sldr").css({
      'display': 'block',
      'transition': 'none',
      'width': '50px'
    }).animate({
        left: endx[1] - 15,
        top: 160 + endy[1]
      }, 2000,
      function() {
        node.attr("stroke", "green");
        start.removeClass('started');
        $('#sldr').css('visibility', 'hidden');
      })
  };
});

我尝试使用for循环迭代每一行，但动画仍然只在第一行播放。

对此有任何解决方案吗？