Reseat progress/timer Bar

user_10984630 0
Viewed 66

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 class="section-6">
  <p class="review"></p>
  <img src="" class="client-logo"/>
  <div class="progress-bar"></div>
</div>

css html jquery javascript
2 Answers

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.

user_24222240

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 class="section-6">
  <p class="review"></p>
  <img src="" class="client-logo"/>
  <div class="progress-bar"></div>
</div>

user_159247340
Related