Question

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

感谢。

＆＃13;

$(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();
});

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

Answer 1

请勿使用barTrack方法设置.css()的宽度，并使用正确的变量percent代替$(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>

进度条动画不起作用

1 个答案: