javascript - 关于一个图片流动的动画，怎么不行？？？

Question

        move(arr_img[0],0,0);
        move(arr_img[1],1,1)
        move(arr_img[2],2,2)
        move(arr_img[3],3,3)
        move(arr_img[4],4,4)

//arr_img[i]分别是5个img元素

    function  move(elem,j,i){
        
      elem.animate({marginLeft:-170*(i+1)},4000*(i+1),'linear'
      ,function(){$(this).css("margin-left",690);
              })
      setTimeout(move(elem,i,j),10);
    }    

为什么只有arr_img[1]运行了动画，其他几个都没有？？？
难道因为是无限循环？？那怎么能让四个元素分别同时执行动画？？

Answer 1

你的问题在于没有正确地「在异步循环中使用递归」，move 方法没有办法退出

function move(elem, j, i) {
  elem.animate({ marginLeft:-170*(i+1) }, 
  4000*(i+1), 
  'linear', 
  // 回调函数
  function(){
    $(this).css("margin-left",690);
    // 按你的逻辑应该是在这里做下一次的 move 调用，但由于你的传入参数是变化的，因此需要换一个思路
    move(elem, j, i);
  })
}

正确的方法

// 改变传入参数，第一个参数直接传递数组，后面两个作为起始量（其实这里 i 和 j 是同一个值，为什么不合并成一个呢？更何况函数中也没有用到 j）
move(arr_img, 0); 

function move(elem, i) {
  function next(idx) {
      elem[idx].animate({ marginLeft:-170*(idx+1) }, 
      4000*(idx+1), 
      'linear', 
      // 回调函数
      function(){
        $(this).css("margin-left",690);
        if(i < elem.length){
          next(i+1);
        }
      });
  }
  next(i);
}

希望有所帮助~ ：）

Answer 2

Settineout使用不正确，10毫秒改为10 *i，也就是第一个10毫秒，第二个20毫秒……