Reseat progress/timer Bar-CodePudding

I'm trying to reset my progress bar at the bottom of the review area once the new text and logo appears, but for some reason is not resetting properly. I've included a line at the very beginning of the changeText function basically overwriting the width of the progress-bar back to 0% but is not working. Any feedback? :)

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 >
  <p ></p>
  <img src="" />
  <div ></div>
</div>

CodePudding user response：

Your line $('.progress-bar').css('width','0'); has no visible effect because you are using a 7s setInterval and a 7s independent progress bar animation that you start on each interval tick. This means that the animation starts slightly after the tick and lasts sightly into the next tick. So what happens then is that the next tick sets the progress bar to 0 while the previous animation is still in progress and the animation corrects the 0 right away to the next animated value. That is why you don't see the progress bar reset.

Either save references to progress bar animations and cancel them on each tick, or reduce the progress bar animation duration to something less than 7s. A duration of 6500 ms will do and it still looks fine.

CodePudding user response：

Reset it with .animate({width: "0%"}, 0);

Also use width: "100%" instead of " =100%". This will make your width to stay at 100% instead of going to 200%, 300% etc..

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 >
  <p ></p>
  <img src="" />
  <div ></div>
</div>