Jquery 动画 - 循环 div

Question

大家好，我在循环播放这些 div 时遇到了问题。

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

我也有这个功能，我认为应该可以，但是没有用anything/I我做错了哈哈。

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

你会希望你的计时器运行快于每 2000 毫秒一次，我将其更改为每 20 毫秒运行一次。此解决方案基于使用 position: absolute; 并更改 div 的 left 属性。

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

如果你想加快 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();

Fiddle: https://jsfiddle.net/u160Lg3h/

Jquery 动画 - 循环 div

Jquery Animation - looping divs

html

javascript

css

jquery

jquery-animate