使用JQuery让动画一个接一个地播放

我用

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循环迭代每一行，但动画仍然只在第一行播放

---

有什么解决办法吗？

我完全不明白你想做什么以及你的代码应该做什么，因为它似乎与你的描述没有任何关系：D你只是在点击一个按钮后用给定的id设置某个元素的动画。。。这与你的问题有什么关系？我只发布了动画的代码，因为绘制的线的坐标已经保存到数组中。startx、starty、endx和endy指定包含坐标的数组。我使用这些坐标来指定图像移动的方向。我想让图像在每行上移动。也许这对你有帮助不，不是真的。我需要找到一种方法使图像在每一行上移动