Estoy tratando de restablecer mi barra de progreso en la parte inferior del área de revisión una vez que aparece el nuevo texto y logotipo, pero por alguna razón no se restablece correctamente. Incluí una línea al principio de la función changeText básicamente sobreescribiendo el ancho de la barra de progreso al 0% pero no funciona. ¿Cualquier retroalimentación? :)
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>Tu línea $('.progress-bar').css('width','0'); no tiene ningún efecto visible porque está utilizando un setInterval de 7s y una animación de barra de progreso independiente de 7s que comienza en cada marca de intervalo. Esto significa que la animación comienza un poco después del tic y continúa hasta el siguiente tic. Entonces, lo que sucede es que el siguiente tic establece la barra de progreso en 0 mientras la animación anterior aún está en progreso y la animación corrige el 0 de inmediato al siguiente valor animado. Es por eso que no ve el reinicio de la barra de progreso.
Guarde las referencias a las animaciones de la barra de progreso y cancélelas en cada marca, o reduzca la duración de la animación de la barra de progreso a menos de 7 segundos. Una duración de 6500 ms servirá y todavía se ve bien.
Restablezca con .animate({width: "0%"}, 0);
También use width: "100%" en lugar de "+=100%" . Esto hará que su ancho permanezca al 100% en lugar de ir al 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>