将宽度设置为指定的百分比并在设置动画时显示从 0 到指定百分比的百分比

Question

我希望 bar 从 width:0 动画到 width:95%。

此外，我希望在 width 动画时，在 .barPercent 元素内显示从 0% 到 95% 的百分比。

但是根据我的尝试，宽度动画结束了，而 .barPercent 元素中的百分比还没有达到 95% 并且静止图像增加了。

我找不到让它们匹配在一起并同时完成宽度动画和百分比增量的方法。

 var bar = $('.bar'),
 percent = bar.find('.barPercent'),
 i=1, interval;
 percent.text(i + '%');
 i++;
 interval = setInterval(function(){
 percent.text(i + '%');
 if(i == 95){
  clearInterval(interval);
 }
 i++;
 },2000/95);
 bar.animate({
 width: 95 + '%'
  },2000,'linear');

 .bar{
      height: 30px;
      background: red;
      position: relative;
      width: 0px;
      overflow: visible !important;
  }
  .barPercent {
     width: 50px;
     height: 40px;
     position: absolute;
     top: -5px;
     right: 0;
     background: #81858a;
     line-height: 40px;
     text-align: center;
     color: #fff;
     font-size: 0.88em;
  }

<html>
<head>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
  <meta name = "viewport" content = "width=device-width,initial-scale=1,shrink-to-fit=no" />
</head>
<body>
<div class="barContainer">
  <div>HTML</div>
   <div class="bar" data-width="95">
    <span class="barPercent">0</span>
   </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
</body>
</html>

如何让width和percentages increment同时完成？

有没有更好的解决方案？

为什么他们的持续时间不匹配？

谢谢

Answer 1

$('.bar').each(function () {

    duration = 2000; //in ms
    step = 0.5; //increase in width in px

    var bar = $(this),
        percent = bar.find('.barPercent'),
        barWidth = Number(bar.data('width')),
        i = 1,
        interval;
/*
    percent.text(i + '%');
    i++;*/

    interval = setInterval(function () {
        widthNumb = Math.floor(i);
        percent.text(widthNumb + '%');
        if (i >= barWidth) {
            clearInterval(interval);
        }

        bar.css({
            "width": i + '%'
        });

        i = i + step;
    }, Math.floor(duration / barWidth / 10));

    /*
    bar.animate({
        width: barWidth + '%'
    }, duration/step, 'linear'); //
    */
});

我使用步长变量 = 0.5 来增加像素宽度，但是使用 Math.floor 显示的 % 文本将是整数。您可以通过更改 duration 和 step

的值来播放

将宽度设置为指定的百分比并在设置动画时显示从 0 到指定百分比的百分比

Animating width to a specified percent and showing the percent from 0 to that specified percent while animating

jquery

jquery-animate