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/