Получите анимацию, чтобы играть друг за другом, используя 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 для перебора каждой строки, но анимация по-прежнему воспроизводится только на первой строке.

Любое решение для этого, пожалуйста?