动画上的无限循环

Question

我需要一个div滑出屏幕的左边，当宽度完成时，它必须重新启动。 比如它无休止地在一个圆圈中奔跑。

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

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

9913是我在div中的div的当前宽度。 现在它只是完成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

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

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

我把一个非常基本的小提琴放在一起来展示这种技术： http ： //jsfiddle.net/6mfCx/

Answer 2

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

假设你的div宽度是1920px，然后从background-position:0px 0px到background-position:-1920px 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();