无法在右侧的进度条中设置文本

Question

我有这个进展，就像0％的文字一样，我也希望在进度条结束时100％的文本始终可见。

function moveProgressBar() {
  var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
  var getProgressWrapWidth = $('.progress-wrap').width();
  var progressTotal = getPercent * getProgressWrapWidth;
  var animationLength = 1500;
  // on page load, animate percentage bar to data percentage length
  $('.progress-bar').animate({
    left: progressTotal
  }, animationLength);
}

moveProgressBar();

.progress {
  width: 500px;
  height:40px;
}

.progress-wrap {
  background: #f80;
  margin: 20px 0;
  overflow: hidden;
  position: relative;
}

.progress-bar {
  background: #ddd;
  left: 0;
  position: absolute;
  top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 col-sm-4 col-sm-push-4 progressbar">
  <div class="progress-wrap progress" data-progress-percent="20">
    <p style="position: absolute; top: 0px; left: 5px;">0%</p><div class="progress-bar progress">
    <p style="position: absolute; top: 2px; right: 5px;">110%</p>
    </div>
  </div>
</div>

如何让100％站在右侧并始终可见？

Answer 1

你必须这样做。从<p>

中删除<div>

<强>段

function moveProgressBar() {
  var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
  var getProgressWrapWidth = $('.progress-wrap').width();
  var progressTotal = getPercent * getProgressWrapWidth;
  var animationLength = 1500;
  // on page load, animate percentage bar to data percentage length
  $('.progress-bar').animate({
    left: progressTotal
  }, animationLength);
}

moveProgressBar();

.progress {
  width: 500px;
  height:40px;
}

.progress-wrap {
  background: #f80;
  margin: 20px 0;
  overflow: hidden;
  position: relative;
}

.progress-bar {
  background: #ddd;
  left: 0;
  position: absolute;
  top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 col-sm-4 col-sm-push-4 progressbar">
  <div class="progress-wrap progress" data-progress-percent="20">
    <p style="position: absolute; top: 0px; left: 5px;">0%</p>
    <div class="progress-bar progress">
    </div>
    <p style="position: absolute; top: 2px; right: 5px;">110%</p>
  </div>
</div>

Answer 2

你已经为0做了，100％做同样的事。

function moveProgressBar() {
  var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
  var getProgressWrapWidth = $('.progress-wrap').width();
  var progressTotal = getPercent * getProgressWrapWidth;
  var animationLength = 1500;
  // on page load, animate percentage bar to data percentage length
  $('.progress-bar').animate({
    left: progressTotal
  }, animationLength);
}

moveProgressBar();

.progress {
  width: 500px;
  height: 40px;
}
.progress-wrap {
  background: #f80;
  margin: 20px 0;
  overflow: hidden;
  position: relative;
}
.progress-bar {
  background: #ddd;
  left: 0;
  position: absolute;
  top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 col-sm-4 col-sm-push-4 progressbar">
  <div class="progress-wrap progress" data-progress-percent="20">
    <p style="position: absolute; top: 0px; left: 5px;">0%</p>
    <div class="progress-bar progress"></div>
    <p style="position: absolute; top: 2px; right: 5px;">110%</p>
  </div>
</div>