Анимация ширины до указанного процента и отображение процента от 0 до указанного процента во время анимации

Question 1

Я хочу, чтобы bar анимировался от width:0 до width:95%.

Также я хочу, чтобы процентное соотношение отображалось от 0% до 95% внутри элемента .barPercent при анимации width.

Но с тем, что я пробовал, анимация ширины заканчивается, тогда как проценты в элементе .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 выполнялись одновременно?

Есть ли лучшее решение?

Почему их продолжительность не совпадает?

Благодарность

jquery jquery-animate

0

Code-Lover 19 Июл 2020 в 02:35

Answer

$('.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'); //
    */
});

Я использовал переменную step = 0,5, чтобы увеличить ширину в пикселях, однако отображаемый текст% будет целым числом с использованием Math.floor. Вы можете играть, изменяя значения длительности и шага.

1

Alwaysa Learner 19 Июл 2020 в 19:24

Question 2

$('.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'); //
    */
});

Я использовал переменную step = 0,5, чтобы увеличить ширину в пикселях, однако отображаемый текст% будет целым числом с использованием Math.floor. Вы можете играть, изменяя значения длительности и шага.

1

Alwaysa Learner 19 Июл 2020 в 19:24

Анимация ширины до указанного процента и отображение процента от 0 до указанного процента во время анимации

1 ответ

Похожие вопросы

Новые вопросы

jquery