首页 > 关于一个图片流动的动画,怎么不行???

关于一个图片流动的动画,怎么不行???

        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]运行了动画,其他几个都没有???
难道因为是无限循环??那怎么能让四个元素分别同时执行动画??


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


你的问题在于没有正确地「在异步循环中使用递归」,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);
}

希望有所帮助~ :)

【热门文章】
【热门文章】