动画无限循环

Question

我需要一个 div 从屏幕左侧滑出，当宽度完成后它必须重新启动。例如就像它在不停地转圈一样。

我在搜索 stackoverflow 后设法找到了这个。

jQuery(".slide-inner").animate({left: -9913}, 80000, 'linear');

9913 是我的 div 的当前宽度，以 px 为单位。现在它刚刚完成 9913 宽度然后结束动画，它需要重新开始而不显示空白，例如当它到达 9913 中的最后一个像素时，它必须从 1px 重新开始。

我的html：

<div class="slide-inner">
<div class="one ani"></div>
<div class="two ani"></div>
<div class="three ani"></div>   
<div class="four ani"></div>
<div class="five ani"></div>
<div class="six ani"></div>
</div>

忽略 .slide-inner 中的元素。这些只是我与 css3 一起使用的绝对位置 div，以在关键点点亮滑块。

编辑：

var animate = function() {
  $(".slide-inner").animate({left: -9913}, 80000, 'linear', function() {
  $(this).css('left', 1);
  animate();
 });
}
animate();

上面代码的问题是'，1）需要响应，所以我不能放在那里-1920然后在浏览器调整大小时它不会像它应该的那样运行？

Answer 1

实现此目的的一种方法是为您的 div 使用 background-image 和 background-repeat:repeat-x;。然后你可以为 div 的background-position 属性设置动画并获得想要的效果。

假设你的 div 宽度是 1920px，然后从 background-position:0px 0px 动画到 background-position:-1920px 0px;。

function animate() {
  $(".slide-inner").animate({'background-position':'0px -1920px'}, 80000, 'linear', function() {
    $(this).css('background-position','0px 0px');
    animate();
  });
}
animate();

Answer 2

听起来你想要的是 animate() 的回调，结合执行动画的函数，即递归函数。

var animate = function() {
  $(".slide-inner").animate({left: -9913}, 80000, 'linear', function() {
    $(this).css('left', 1);
    animate();
  });
}
animate();

我整理了一个非常基本的小提琴来演示这种技术：http://jsfiddle.net/6mfCx/