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);
}
希望有所帮助~ :)