重置进度/计时器栏

Question

一旦出现新的文本和徽标，我正在尝试重置审核区域底部的进度条，但由于某种原因无法正确重置。我在 changeText 函数的最开始包含了一行，基本上将进度条的宽度覆盖回 0% 但不起作用。任何反馈？ :)

var review = new Array();
review.push("Text1");
review.push("Text2");
review.push("Text3");

var clientlogo = new Array();
clientlogo.push("");
clientlogo.push("");
clientlogo.push("");

var point = 0;

function changeText(){
  $('.progress-bar').css('width','0'); 
  $('.review').fadeOut(500, function() { $('.review').fadeIn(500).html(review[point])});
  $('.client-logo').fadeOut(500, function() { $('.client-logo').fadeIn(500).attr('src',clientlogo[point])});
  if(point < ( review.length - 1 ) ){
    point++;
  }else{
    point = 0;
  }  
  $(".progress-bar").animate({
    width: "+=100%"
  }, 7000); 
}
 
setInterval(changeText, 7000);
changeText();

.section-6 {
width: 100%;
height: 300px;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: black;
color: white;
}

.client-logo {
width: 200px;
height: 100px;
}

.progress-bar {
width: 0%;
height: 5px;
background-color: red;
position: absolute;
bottom: 0;
left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section-6">
  <p class="review"></p>
  <img src="" class="client-logo"/>
  <div class="progress-bar"></div>
</div>

Answer 1

$('.progress-bar').css('width','0'); 行没有可见效果，因为您使用的是 7s setInterval 和 7s 独立进度条动画，您在每个间隔滴答声中开始。这意味着动画在滴答声之后稍稍开始并持续到下一个滴答声。那么接下来会发生什么，下一个刻度将进度条设置为 0，而前一个动画仍在进行中，并且动画立即将 0 更正为下一个动画值。这就是您看不到进度条重置的原因。

要么保存对进度条动画的引用并在每次滴答时取消它们，要么将进度条动画持续时间减少到少于 7 秒。 6500 毫秒的持续时间就可以了，而且看起来还不错。

Answer 2

用.animate({width: "0%"}, 0);重置它

同时使用width: "100%" 代替"+=100%"。这将使您的宽度保持在 100% 而不是 200%、300% 等。

var review = new Array();
review.push("Text1");
review.push("Text2");
review.push("Text3");

var clientlogo = new Array();
clientlogo.push("");
clientlogo.push("");
clientlogo.push("");

var point = 0;

function changeText(){
  $(".progress-bar").animate({
    width: "0%"
  }, 0);
  $('.review').fadeOut(500, function() { $('.review').fadeIn(500).html(review[point])});
  $('.client-logo').fadeOut(500, function() { $('.client-logo').fadeIn(500).attr('src',clientlogo[point])});
  if(point < ( review.length - 1 ) ){
    point++;
  }else{
    point = 0;
  }  
  $(".progress-bar").animate({
    width: "100%"
  }, 7000); 
}
 
setInterval(changeText, 7000);
changeText();

.section-6 {
width: 100%;
height: 300px;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: black;
color: white;
}

.client-logo {
width: 200px;
height: 100px;
}

.progress-bar {
width: 0%;
height: 5px;
background-color: red;
position: absolute;
bottom: 0;
left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section-6">
  <p class="review"></p>
  <img src="" class="client-logo"/>
  <div class="progress-bar"></div>
</div>