Question

我正在尝试使用jQuery和CSS创建进度条。目前我已经使用CSS创建了进度条，我可以使用jQuery对其进行动画处理。但是，我无法阻止进度条（加载动画）在到达100%时停止。

为了解释这个问题，我创建了这个工作片段：

$(document).ready(function() {
  $('.progress-bar').css({
    'width': '0%'
  });

  setInterval(function() {
    // place this within dom ready function    
    if (currentProgress == '100') {
      alert('all downloaded');
    } else {
      var currentProgress = $(".progress-bar").width() / $('.progress-bar').parent().width() * 100;
      var setWidth = Number(currentProgress) + 25;
      if (currentProgress > 80) {
        $('.progress-bar').css({
          'width': '' + setWidth + '%',
          'background-color': '#86e01e'
        });
      } else {
        $('.progress-bar').css({
          'width': '' + setWidth + '%',
          'background-color': '#f27011'
        });
      }
    }
  }, 3000);

  // use setTimeout() to execute
  //setTimeout(showpanel, 3000);
});

container {
  margin: 60px auto;
  width: 90%;
  text-align: center;
}

.container .progress {
  margin: 0 auto;
  width: 90%;
}

.progress {
  padding: 4px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}

.progress-bar {
  height: 16px;
  border-radius: 4px;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  transition: 0.4s linear;
  transition-property: width, background-color;
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container">
  <div class="progress">
    <div class="progress-bar"></div>
  </div>
</div>

如果您运行代码段，您会看到进度条即使超过100％也会继续运行。

有人可以就此问题提出建议吗？任何帮助将不胜感激。

Answer 1

您只需将setWidth修改为：

即可

var setWidth = Number(currentProgress) > 75 ? 100 : Number(currentProgress) + 25;

现在你的酒吧会停止。

但您的代码并不理想。最好将setInterval分配给变量，以便稍后可以停止它：

var timer = setInterval(function() {
    // place this within dom ready function    
    if (currentProgress == '100') {
      alert('all downloaded');
    } else {
      var currentProgress = $(".progress-bar").width() / $('.progress-bar').parent().width() * 100;
      var setWidth = Number(currentProgress) > 75 ? 100 : Number(currentProgress) + 25;
      if (currentProgress > 80) {
        $('.progress-bar').css({
          'width': '' + setWidth + '%',
          'background-color': '#86e01e'
        });
      } else {
        $('.progress-bar').css({
          'width': '' + setWidth + '%',
          'background-color': '#f27011'
        });
      }
    }
  if (setWidth>=100){clearInterval(timer);}
  }, 3000);

注意我如何分配给变量timer并将其用作clearInterval()的参数

Answer 2

你的程序没有停止的原因是你没有停止间隔。除此之外，设置宽度也有误。

我已根据您的小提琴添加了更新的代码： -

＆＃13;

$(document).ready(function() {
  $('.progress-bar').css({
    'width': '0%'
  });


  var currentProgress = 0;
  var setWidth = 0;
  var timer = setInterval(function() {
    // place this within dom ready function
    if (currentProgress >= 100) {
      alert('all downloaded');
      clearInterval(timer);
    } else {
      currentProgress = Math.round($(".progress-bar").width() / $('.progress-bar').parent().width() * 100);

      if (currentProgress > 70 && currentProgress <= 100) {
        $('.progress-bar').css({
          'width': '' + setWidth + '%',
          'background-color': '#86e01e'
        });

      } else if (currentProgress < 100) {
        $('.progress-bar').css({
          'width': '' + setWidth + '%',
          'background-color': '#f27011'
        });
      }

      setWidth = currentProgress + 25;
    }
  }, 3000);
});

＆＃13;

container {
  margin: 60px auto;
  width: 100%;
  text-align: center;
}

.container .progress {
  margin: 0 auto;
  width: 100%;
}

.progress {
  padding: 4px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}

.progress-bar {
  height: 16px;
  border-radius: 4px;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  transition: 0.4s linear;
  transition-property: width, background-color;
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <div class="progress">
    <div class="progress-bar"></div>
  </div>
</div>

＆＃13;

Answer 3

您正在寻找window.clearInterval(intervalID)，其中intervalID是window.setInterval(func, delay, ...)的结果。

另外，如果你可以提供帮助（你可以）使用setTimeout而不是setInterval！。

达到100％时停止进度条动画？

3 个答案: