jquery动画 - 循环divs

Question

嘿伙计我有一个循环这些div的问题。

当第一个div离开屏幕时，我希望它跳回到屏幕的开头并重新开始循环。这里是jsfiddle。

我也有这个功能，我认为应该工作，但它没有做任何事情/我做错了什么事哈哈。

var boxes = $('#inner>div'); 
var speeds = [ 
0.5, 0.5, 0.35, 0.45, 0.46, 0.55, 0.5, 0.5 
]; 

function update() { 
    var width = $('#wrapper').width; 

    // update boxes 
    for (var i = 0; i < boxes.length; i++) { 
    var box = boxes[i]; 
    var speed = speeds[i]; 

    box.left -= speed; 

    if (box.left < -box.width) { 
     cloud.left = width; 
    } 
    }; 
    window.setTimeout(update, 2000); 
}; 

Answer 1

你会希望你的计时器每2000ms运行一次，我改变了每20ms运行一次。此解决方案基于使用position: absolute;并更改您divs的left属性。

您可以在此处进行的一些性能改进是存储div的宽度和窗口的宽度，以便您不必在每个循环中重新计算这些值。

如果你想起来的div的速度，你可以使计时器更快（更多的CPU负载），也可以提高速度数组中的值（没有大的性能损失，可能看起来不顺利）

var boxes = $('#inner>div'); 
var speeds = [ 
0.5, 0.5, 0.35, 0.45, 0.46, 0.55, 0.5, 0.5 
]; 

function update() { 
    var width = $('#wrapper').width; 

    // update boxes 
    for (var i = 0; i < boxes.length; i++) { 
    var box = $(boxes[i]); 
    var speed = speeds[i]; 
    var leftPos = box.position().left; 
    box.css({left: leftPos + speed}); 

    if (leftPos + box.width() > $(window).width()) { 
     box.css({left: 0}); 
    } 
    }; 
    window.setTimeout(update, 20); 
}; 

$('#inner>div').each(function(i){ 
    $(this).css('top', i * 50); 
}); 

update(); 

小提琴：https://jsfiddle.net/u160Lg3h/