jQuery动画循环不起作用，即使调用了函数

Question

I have this code:

HTML:

<div class="rotatingbg"> 
      <div id="bg1"></div>
</div>

jQuery:

function animatebg() {
   $('#bg1').animate({left:'-4500px'}, 25000, 'linear', animatebg);
}

然而，即使我在函数内部调用该函数，动画也只会运行一次，并且不会无限循环。这里缺少或者有什么错误？

- catandmouse

Answer 1

你需要一个反向动画，将元素重置回原始位置，否则一旦你的元素到达 -4500px，它将会动画移动到完全相同的位置，这不会产生任何视觉变化。

以下是一个示例，其中包含两个动画 - 一个向前动画，一个向后动画：

function animatebg() {
   $('#bg1').animate({left:'100px'}, 2500, 'linear', animateback);
}

function animateback() {
   $('#bg1').animate({left:'0px'}, 2500, 'linear', animatebg);
}

animatebg();

#bg1 {
    background-color: black;
    width: 100px;
    height: 100px;
    position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rotatingbg"> 
      <div id="bg1"></div>
</div>

JSFiddle Version: https://jsfiddle.net/cqd3n5wL/

- Maximillian Laumeister

Answer 2

尝试在完成回调函数中将#bg1的left设置为4500 + window.innerWidth + $(this).width() + "px"，这应该会在调用animatebg递归之前将元素呈现在视口右侧。

function animatebg() {
  $("#bg1").animate({
    left: "-4500px"
  }, 25000, "linear", function() {
    $(this).css("left", 4500 + window.innerWidth + $(this).width() + "px");
    animatebg();
  });
}

animatebg();

#bg1 {
  position: relative;
  left: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="rotatingbg">
  <div id="bg1">abc</div>
</div>

- guest271314