Question

我有这段代码：

HTML：

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

jQuery的：

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

但是，动画只运行一次，即使我在函数中调用了函数，也不会无限循环。

缺少什么或不正确？

Answer 1

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

这是一个有两个动画的示例 - 一个动画向前，一个动画回来：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

JSFiddle版本：https://jsfiddle.net/cqd3n5wL/

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>

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

2 个答案: