重置進度/計時器欄-有解無憂

一旦出現新的文本和徽標，我就會嘗試重置審核區域底部的進度條，但由于某種原因未正確重置。我在 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>

uj5u.com熱心網友回復：

您的線條$('.progress-bar').css('width','0');沒有可見效果，因為您使用的是 7s setInterval 和 7s 獨立進度條影片，您在每個間隔刻度上開始。這意味著影片在滴答之后稍微開始，并持續到下一個滴答。那么接下來會發生什么，下一個刻度將進度條設定為 0，而前一個影片仍在進行中，影片立即將 0 更正為下一個影片值。這就是為什么您看不到進度條重置的原因。

保存對進度條影片的參考并在每個刻度上取消它們，或者將進度條影片持續時間減少到小于 7 秒。6500 毫秒的持續時間就可以了，它看起來仍然不錯。

uj5u.com熱心網友回復：

重置它 .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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/401761.html

標籤：javascript html 查询 css

上一篇：獲取最多可容納影像中大量像素的矩形寬度和高度值

下一篇：更改輪播上div的背景顏色