javascript - jQuery-创建动画加载栏时遇到麻烦，从左到右缩小

我正在尝试使用loading bar的jquery和与animate函数结合的简单for loop创建类似setInterval的东西。看来可行，但并非完全如我所愿。我的目标是将条形图一直扩展到最右边，下一次迭代应将该条形从左向右缩小，然后再进行一次，扩展到width=100%（从左到右），下一次迭代应将其缩小，再次从左到右。
现在，该栏会拉伸到100%并从右向左收缩，而不是我需要的从左至右。有人可以指导我解决这个问题吗？

小提琴here。

CSS：

  #x {
    background-color: #076c4a;
    height: 10px;
    position: absolute;
    z-index: 2222;
    border-radius: 150px;
  }

JS：

$(document).ready(function() {
  var click = false;
  for (var loop = 0; loop < 10; loop++) {
    var rotatorInterval = setInterval(function() {
      if (click == false || click == undefined) {
        loop++;
        if (loop === 10) {
          loop = 0;
        }
        animateDiv(loop);
      } else {
        clearInterval(rotatorInterval);
      }
    }, 2500);
  }
});

function animateDiv(loop) {

  if (loop % 2 != 0) {
    $("#x").animate({
      left: "0",
      width: '100%'
    }, 1250);
  } else {
    $("#x").animate({
      right: "0",
      width: "0"
    }, 1250);
  }
}

最佳答案

看来您有一些问题。 for之外的setInterval循环使loop中的变量setInterval混乱。您只需要一个简单的var loop = 0;。

您也不会在每个周期重置右属性和左属性，因此它们将永远固定为right: 0; left: 0;。将另一个设置为auto时，应将每个重置为0，并且应使用css()而不是animate()进行设置。

Here's a fiddle that fixes these problems.

但是，即使在我的浏览器中进行了大约十次迭代之后，该修复程序也脱离了轨道，因为浏览器的计算会导致间隔未对齐。

我建议用requestAnimationFrame而不是setInterval和animate()重写加载栏。每帧，检查自动画开始以来的时间，计算栏的宽度和对齐方式，并设置元素的样式。您将获得更好的性能，并且任何事情都不可能掉线。

Here's a fiddle for that.