进度条动画不起作用

Husna 发表于 Dev

胡斯纳

我在做进度条，问题是进度条动画不起作用。我希望条形轨道同时从左向右%移动也移动我尝试但不工作动画无法正常工作。任何人都可以建议。

谢谢。

$(document).ready(function() {
  function ProgressBar() {
    $('.progress-bar').each(function() {
      var percent = $(this).find('.progress-bar--barTrack').attr('data-width');
      $(this).find('.progress-bar--barTrack').css('width', percent + '%');
      $(this).find('.progress-bar--label').append(percent + '%');
      $('.progress-bar--barTrack').animate({
        width: $(this).percent,
      }, 5000);
    });
  }
  ProgressBar();
});

.progress-bar {
  position: relative;
}

.progress-bar-s1 .progress--barTitle {
  padding: 1% 1% 3% 0;
  width: 15%;
}

.progress-bar-s1 .progress-bar--inner {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.09) inset;
  background-color: #ebebeb;
}

.progress-bar-s1 .progress-bar--barTrack {
  position: relative;
  display: block;
  padding: 20px 0;
  width: 0;
  background-color: #F7CA18;
}

.progress-bar-s1 span.progress-bar--label {
  position: absolute;
  top: 35%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-bar progress-bar-s1">
  <div class="progress--barTitle">Integrity</div>
  <div class="progress-bar--inner">
    <span class="progress-bar--barTrack" data-width="60"></span>
  </div>
  <span class="progress-bar--label"></span>
</div>

萨帕尔

不要设置barTrackusing.css()方法的宽度并使用正确的变量 iepercent而不是$(this).percent在 animate 方法中设置宽度。

根据评论，我也想同时移动 60%

您还需要为.progress-bar--label设置动画并修改其 CSS 规则。

$(document).ready(function() {
  function ProgressBar() {
    $('.progress-bar').each(function() {
      var percent = $(this).find('.progress-bar--barTrack').attr('data-width');
      
      $(this).find('.progress-bar--label').text(percent + '%');      
      $(this).find('.progress-bar--barTrack, .progress-bar--label').animate({
        width: percent + '%'       
      }, 5000);
    });
  }
  ProgressBar();
});

.progress-bar {
  position: relative;
}

.progress-bar-s1 .progress--barTitle {
  padding: 1% 1% 3% 0;
  width: 15%;
}

.progress-bar-s1 .progress-bar--inner {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.09) inset;
  background-color: #ebebeb;
}

.progress-bar-s1 .progress-bar--barTrack {
  position: relative;
  display: block;
  padding: 20px 0;
  width: 0;
  background-color: #F7CA18;  
}

.progress-bar-s1 span.progress-bar--label {
  position: relative;
  text-align:right;
  width: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-bar progress-bar-s1">
  <div class="progress--barTitle">Integrity</div>
  <span class="progress-bar--label"></span>
  <div class="progress-bar--inner">
    <span class="progress-bar--barTrack" data-width="60"></span>
  </div>
  
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。