我做了一个小的幻灯片放映框，它有一个动画计时器栏，每次幻灯片更改时都会重置 - 你可以看到它在这里工作：https://codepen.io/JTBennett/pen/JJzZqK
我的问题是第一张幻灯片的初始状态将其不透明度设置为 0，但我希望它从一开始就可见。我尝试将仅用于该幻灯片的 css 设置为 opacity：1，但由于某种原因，它在整个周期中仍然可见。
我还尝试调整循环的开始，但它完全切断了上一张幻灯片。
我将在这里只发布javascript，因为(我知道这是意大利面条，我很糟糕)，但是如果您在代码笔上查看它的实际操作，可能会更容易理解。
如何使第一张幻灯片 1 的初始不透明度在整个循环中不保留？
$(document).ready(function(){
setInterval(function() {
$('.sb-1-bot > div:first')
.removeClass('sb-active')
.next()
.addClass('sb-active')
.end()
.appendTo('.sb-1-bot');
var all = $('.sb-1-icon svg');
var query1 = $('.sb-pg-1').css('opacity');
var icon1 = $('.sb-ic-1 svg');
var query2 = $('.sb-pg-2').css('opacity');
var icon2 = $('.sb-ic-2 svg');
var query3 = $('.sb-pg-3').css('opacity');
var icon3 = $('.sb-ic-3 svg');
var query4 = $('.sb-pg-4').css('opacity');
var icon4 = $('.sb-ic-4 svg');
var query5 = $('.sb-pg-5').css('opacity');
var icon5 = $('.sb-ic-5 svg');
if(query1 == 1) {
all.css('opacity','0');
icon1.css('opacity','1');
}
if(query2 == 1) {
all.css('opacity','0');
icon2.css('opacity','1');
}
if(query3 == 1) {
all.css('opacity','0');
icon3.css('opacity','1');
}
if(query4 == 1) {
all.css('opacity','0');
icon4.css('opacity','1');
}
if(query5 == 1) {
all.css('opacity','0');
icon5.css('opacity','1');
}
var bar = $('.sb-pg-timer');
var origin = 0;
bar.animate({
'width': origin,
}, 0,function(){
$(this).animate({
'width' : '100%',
}, 10000, function() {
$(this).animate({
'width': origin,
}, 0)
})});
}, 10000);
});
您不希望将不透明度设置为默认状态，但希望将sb-active类设置为sb-pg-1div 的默认类。
$(document).ready(function() {
$(".sb-pg-1").addClass("sb-active");
setInterval(function() {
$(".sb-1-bot > div:first")
.removeClass("sb-active")
.next()
.addClass("sb-active")
.end()
.appendTo(".sb-1-bot");
var all = $(".sb-1-icon svg");
var query1 = $(".sb-pg-1").css("opacity");
var icon1 = $(".sb-ic-1 svg");
var query2 = $(".sb-pg-2").css("opacity");
var icon2 = $(".sb-ic-2 svg");
var query3 = $(".sb-pg-3").css("opacity");
var icon3 = $(".sb-ic-3 svg");
var query4 = $(".sb-pg-4").css("opacity");
var icon4 = $(".sb-ic-4 svg");
var query5 = $(".sb-pg-5").css("opacity");
var icon5 = $(".sb-ic-5 svg");
if (query1 == 1) {
all.css("opacity", "0");
icon1.css("opacity", "1");
}
if (query2 == 1) {
all.css("opacity", "0");
icon2.css("opacity", "1");
}
if (query3 == 1) {
all.css("opacity", "0");
icon3.css("opacity", "1");
}
if (query4 == 1) {
all.css("opacity", "0");
icon4.css("opacity", "1");
}
if (query5 == 1) {
all.css("opacity", "0");
icon5.css("opacity", "1");
}
var bar = $(".sb-pg-timer");
var origin = 0;
bar.animate(
{
width: origin
},
0,
function() {
$(this).animate(
{
width: "100%"
},
3000,
function() {
$(this).animate(
{
width: origin
},
0
);
}
);
}
);
}, 3000);
});/*deleteme*/
body {font-family: 'Open Sans', sans-serif;color:#333;foont-size:12px;margin:0;padding:0;}
h1, h2, h3, h4, h5, h6 {font-family: 'Oxygen', sans-serif;font-weight:300;letter-spacing:1px;color:#222;}
p {font-style:italic;}
/*deleteme*/
.sb-1-icon svg {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.sb-1 {margin:0;padding:0;}
.sb-1-top {
display:flex;
width:100%;
height:120px;
}
.sb-1-icon {
background:#fff;
padding:14px;
width:50px;
height:50px;
border:1px #ddd solid;
border-radius:50%;
margin:auto;
}
.sb-1-icon svg {opacity:0;}
.sb-ic-1 svg {opacity:1;}
.sb-1-line-2 {
position:absolute;
height:2px;
width:100%;
top:68px;
z-index:-1;
}
.divider {
position: relative;
height: 1px;
}
.div-transparent:before {
content: "";
position: absolute;
top: 0;
left: 5%;
right: 5%;
width: 90%;
height: 1px;
background-image: linear-gradient(to right, transparent, #ddd, transparent);
}
.sb-1-bot {
height:200px;
text-align:center;
}
.sb-page {
position:absolute; width:100%; height:100%;opacity:0;}
.sb-active {opacity:1;}
.sb-pg-timer {
width:0%;
height:3px;
float:left;
background:#f00;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sb-1">
<div class="sb-1-top">
<div class="sb-1-line-2">
<div class="divider div-transparent"></div>
</div>
<div class="sb-1-icon sb-ic-1">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<circle style="fill:#C9C9C9;" cx="253.04" cy="50.24" r="50.24"/>
<g>
<path style="fill:#002833;" d="M250.72,217.2L202.16,112c0,0-50.88,0.64-50.88,47.52s0,57.68,0,57.68S251.04,217.2,250.72,217.2z"
/>
<path style="fill:#002833;" d="M255.44,217.2L304,112c0,0,50.88,0.64,50.88,47.52s0,57.68,0,57.68S255.12,217.2,255.44,217.2z"/>
</g>
<polygon style="fill:#FF5F5F;" points="253.04,112 218.08,112 253.04,189.36 288,112 "/>
<circle style="fill:#C9C9C9;" cx="407.04" cy="345.04" r="50.24"/>
<g>
<path style="fill:#002833;" d="M404.64,512l-48.56-105.2c0,0-50.88,0.64-50.88,47.52s0,57.68,0,57.68S404.96,512,404.64,512z"/>
<path style="fill:#002833;" d="M409.36,512l48.56-105.2c0,0,50.88,0.64,50.88,47.52s0,57.68,0,57.68S409.04,512,409.36,512z"/>
</g>
<polygon style="fill:#FF5F5F;" points="407.04,406.8 372.08,406.8 407.04,484.16 442,406.8 "/>
<circle style="fill:#C9C9C9;" cx="104.96" cy="345.04" r="50.24"/>
<g>
<path style="fill:#002833;" d="M102.64,512L54.08,406.8c0,0-50.88,0.64-50.88,47.52s0,57.68,0,57.68S102.96,512,102.64,512z"/>
<path style="fill:#002833;" d="M107.36,512l48.56-105.2c0,0,50.88,0.64,50.88,47.52s0,57.68,0,57.68S107.04,512,107.36,512z"/>
</g>
<polygon style="fill:#FF5F5F;" points="104.96,406.8 70,406.8 104.96,484.16 139.92,406.8 "/>
</svg>
</div>
<div class="sb-1-icon sb-ic-2">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<rect x="251.28" y="28.4" style="fill:#C9C9C9;" width="9.44" height="9.44"/>
<path style="fill:#C9C9C9;" d="M260.72,455.28h-9.44v-18.96h9.44V455.28z M260.72,417.28h-9.44v-18.96h9.44V417.28z M260.72,379.36
h-9.44V360.4h9.44V379.36z M260.72,341.44h-9.44v-18.96h9.44V341.44z M260.72,303.44h-9.44v-18.96h9.44V303.44z M260.72,265.52
h-9.44v-18.96h9.44V265.52z M260.72,227.6h-9.44v-18.96h9.44V227.6z M260.72,189.6h-9.44v-18.96h9.44V189.6z M260.72,151.68h-9.44
v-18.96h9.44V151.68z M260.72,113.76h-9.44V94.8h9.44V113.76z M260.72,75.76h-9.44V56.8h9.44V75.76z"/>
<rect x="251.28" y="474.24" style="fill:#C9C9C9;" width="9.44" height="9.44"/>
<rect x="452.96" y="130.56" style="fill:#C9C9C9;" width="9.44" height="9.44"/>
<path style="fill:#C9C9C9;" d="M462.48,335.28h-9.44v-19.52h9.44V335.28z M462.48,296.24h-9.44v-19.52h9.44V296.24z M462.48,257.2
h-9.44v-19.52h9.44V257.2z M462.48,218.16h-9.44v-19.52h9.44V218.16z M462.48,179.04h-9.44v-19.52h9.44V179.04z"/>
<rect x="452.96" y="354.88" style="fill:#C9C9C9;" width="9.44" height="9.44"/>
<path style="fill:#C9C9C9;" d="M256,262.96l-8.72-5.28l4.88-8.08l3.84,2.32l7.44-4.48l4.88,8.08L256,262.96z M231.04,247.92
l-16.16-9.76l4.88-8.08l16.16,9.76L231.04,247.92z M284.56,245.68l-4.88-8.08l16.16-9.76l4.88,8.08L284.56,245.68z M198.72,228.32
l-16.16-9.76l4.88-8.08l16.16,9.76L198.72,228.32z M316.96,226.16l-4.96-8.08l16.16-9.76l4.88,8.08L316.96,226.16z M166.32,208.8
l-16.16-9.76l4.88-8.08l16.16,9.76L166.32,208.8z M349.28,206.64l-4.88-8.08l16.16-9.76l4.88,8.08L349.28,206.64z M133.92,189.28
l-16.16-9.76l4.88-8.08l16.16,9.76L133.92,189.28z M381.68,187.04l-4.88-8.08l16.16-9.76l4.88,8.08L381.68,187.04z M101.52,169.68
l-16.16-9.76l4.88-8.08l16.16,9.76L101.52,169.68z M414.08,167.52l-4.88-8.08l16.16-9.76l4.88,8.08L414.08,167.52z M69.2,150.16
l-16.16-9.76l2-3.36l-2.96-5.52l16.72-8.88l4.4,8.32l-9.36,4.96L74,142.08L69.2,150.16z M446.4,148l-4.88-8.08l13.76-8.32l0.72,1.2
l1.44-2.64l9.92,5.28L446.4,148z M436.24,129.6l-16.72-8.88l4.48-8.32l16.72,8.88L436.24,129.6z M89.92,122.08l-4.4-8.32
l16.72-8.88l4.4,8.32L89.92,122.08z M402.88,111.84l-16.72-8.88l4.4-8.32l16.72,8.88L402.88,111.84z M123.28,104.32l-4.4-8.32
l16.72-8.88l4.4,8.32L123.28,104.32z M369.44,94.16l-16.72-8.88l4.4-8.32l16.72,8.88L369.44,94.16z M156.72,86.64l-4.4-8.32
l16.72-8.88l4.4,8.32L156.72,86.64z M336,76.4l-16.72-8.88l4.4-8.32l16.72,8.88L336,76.4z M190.16,68.88l-4.4-8.32l16.72-8.88
l4.4,8.32L190.16,68.88z M302.64,58.64l-16.72-8.88l4.4-8.32l16.72,8.88L302.64,58.64z M223.52,51.12l-4.4-8.32l16.72-8.88
l4.4,8.32L223.52,51.12z M269.2,40.96l-15.44-8.16l1.44-2.64l-2.64-5.04L256,23.2l17.68,9.36L269.2,40.96z"/>
<path style="fill:#C9C9C9;" d="M256,491.76l-8.72-5.28l4.88-8.08l3.84,2.32l7.44-4.48l4.88,8.08L256,491.76z M231.04,476.72
l-16.16-9.76l4.88-8.08l16.16,9.76L231.04,476.72z M284.56,474.56l-4.88-8.08l16.16-9.76l4.88,8.08L284.56,474.56z M198.72,457.2
l-16.16-9.76l4.88-8.08l16.16,9.76L198.72,457.2z M316.88,454.96l-4.88-8.08l16.16-9.76l4.88,8.08L316.88,454.96z M166.32,437.6
l-16.16-9.76l4.88-8.08l16.16,9.76L166.32,437.6z M349.28,435.44l-4.88-8.08l16.16-9.76l4.88,8.08L349.28,435.44z M133.92,418.08
l-16.16-9.76l4.88-8.08L138.8,410L133.92,418.08z M381.68,415.92l-4.88-8.08l16.16-9.76l4.88,8.08L381.68,415.92z M101.52,398.56
l-16.16-9.76l4.88-8.08l16.16,9.76L101.52,398.56z M414.08,396.4l-4.88-8.08l16.16-9.76l4.88,8.08L414.08,396.4z M69.12,378.96
l-16.16-9.76l2-3.36L52,360.32l16.72-8.88l4.4,8.32l-9.36,4.96l10.16,6.16L69.12,378.96z M446.4,376.8l-4.88-8.08l13.76-8.32
l0.72,1.2l1.44-2.64l9.92,5.28L446.4,376.8z M436.24,358.48l-16.72-8.88l4.48-8.4l16.72,8.88L436.24,358.48z M89.92,350.96
l-4.4-8.32l16.72-8.88l4.4,8.32L89.92,350.96z M402.88,340.72l-16.72-8.88l4.4-8.32l16.72,8.88L402.88,340.72z M123.28,333.2
l-4.4-8.32L135.6,316l4.4,8.32L123.28,333.2z M369.44,322.96l-16.72-8.88l4.4-8.32l16.72,8.88L369.44,322.96z M156.72,315.44
l-4.4-8.32l16.72-8.88l4.4,8.32L156.72,315.44z M336.08,305.28l-16.72-8.88l4.4-8.4l16.72,8.88L336.08,305.28z M190.16,297.76
l-4.4-8.32l16.72-8.88l4.4,8.32L190.16,297.76z M302.64,287.52l-16.72-8.88l4.4-8.32l16.72,8.88L302.64,287.52z M223.52,280
l-4.4-8.32l16.72-8.88l4.4,8.32L223.52,280z M269.2,269.76l-15.44-8.16l1.44-2.64l-2.64-5.04l3.44-1.84l17.68,9.36L269.2,269.76z"
/>
</g>
<g>
<circle style="fill:#FF5F5F;" cx="457.76" cy="131.04" r="25.76"/>
<circle style="fill:#FF5F5F;" cx="457.76" cy="364.48" r="25.76"/>
</g>
<g>
<rect x="49.52" y="130.56" style="fill:#C9C9C9;" width="9.44" height="9.44"/>
<path style="fill:#C9C9C9;" d="M59.04,335.28h-9.52v-19.52h9.44v19.52H59.04z M59.04,296.24h-9.52v-19.52h9.44v19.52H59.04z
M59.04,257.2h-9.52v-19.52h9.44v19.52H59.04z M59.04,218.16h-9.52v-19.52h9.44v19.52H59.04z M59.04,179.04h-9.52v-19.52h9.44
v19.52H59.04z"/>
<rect x="49.52" y="354.88" style="fill:#C9C9C9;" width="9.44" height="9.44"/>
</g>
<g>
<circle style="fill:#FF5F5F;" cx="54.24" cy="131.04" r="25.76"/>
<circle style="fill:#FF5F5F;" cx="54.24" cy="364.48" r="25.76"/>
<circle style="fill:#FF5F5F;" cx="256" cy="256" r="25.76"/>
<circle style="fill:#FF5F5F;" cx="256" cy="25.76" r="25.76"/>
<circle style="fill:#FF5F5F;" cx="256" cy="486.24" r="25.76"/>
</g>
</svg>
</div>
<div class="sb-1-icon sb-ic-3">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<polygon style="fill:#002833;" points="389.68,502.08 261.36,393.52 132.96,502.08 112.32,477.68 261.36,351.6 410.32,477.68 "/>
<rect x="21.36" y="30.72" style="fill:#8AD5DD;" width="469.36" height="341.84"/>
<g>
<rect y="9.92" style="fill:#002833;" width="512" height="21.36"/>
<rect y="372.56" style="fill:#002833;" width="512" height="21.36"/>
<rect x="165.36" y="452.56" style="fill:#002833;" width="192" height="10.64"/>
</g>
<g>
<path style="fill:#FFFFFF;" d="M99.12,164l9.92,38.24c2.16,8.4,4.16,16.16,5.6,23.92h0.48c1.68-7.6,4.16-15.68,6.64-23.76
l12.32-38.4h11.52l11.68,37.6c2.8,9.04,4.96,16.96,6.72,24.56h0.48c1.2-7.6,3.28-15.52,5.76-24.4L180.96,164h13.52l-24.24,75.2
h-12.4l-11.52-35.92c-2.64-8.4-4.8-15.84-6.72-24.72h-0.4c-1.84,9.04-4.16,16.8-6.8,24.88l-12.16,35.76h-12.4L85.12,164L99.12,164
L99.12,164z"/>
<path style="fill:#FFFFFF;" d="M215.36,164l9.92,38.24c2.16,8.4,4.16,16.16,5.6,23.92h0.48c1.68-7.6,4.16-15.68,6.64-23.76
l12.32-38.4h11.52l11.68,37.6c2.8,9.04,4.96,16.96,6.72,24.56h0.48c1.2-7.6,3.28-15.52,5.76-24.4L297.2,164h13.52l-24.24,75.2
h-12.4l-11.52-35.92c-2.64-8.4-4.8-15.84-6.72-24.72h-0.32c-1.84,9.04-4.16,16.8-6.8,24.88l-12.16,35.76h-12.4L201.44,164
L215.36,164L215.36,164z"/>
<path style="fill:#FFFFFF;" d="M331.6,164l9.92,38.24c2.16,8.4,4.16,16.16,5.6,23.92h0.48c1.68-7.6,4.16-15.68,6.64-23.76
l12.32-38.4h11.52l11.68,37.6c2.8,9.04,4.96,16.96,6.72,24.56h0.48c1.2-7.6,3.28-15.52,5.76-24.4L413.44,164h13.52l-24.24,75.2
h-12.4l-11.52-35.92c-2.64-8.4-4.8-15.84-6.72-24.72h-0.32c-1.84,9.04-4.16,16.8-6.8,24.88L352.8,239.2h-12.4L317.68,164L331.6,164
L331.6,164z"/>
</g>
</svg>
</div>
<div class="sb-1-icon sb-ic-4">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<polygon style="fill:#FF5F5F;" points="431.12,512 382.8,463.68 448.8,397.68 498.16,447.04 "/>
<rect x="341.617" y="351.998" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 881.5287 386.2147)" style="fill:#FF5F5F;" width="38.32" height="47.36"/>
</g>
<g>
<rect x="350.007" y="384.51" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 968.1555 422.1568)" style="fill:#002833;" width="93.279" height="54.159"/>
<circle style="fill:#002833;" cx="219.6" cy="205.76" r="205.76"/>
</g>
<circle style="fill:#EFEFEF;" cx="219.6" cy="205.76" r="184.24"/>
<rect x="140.88" y="201.28" style="fill:#FF5F5F;" width="26.24" height="71.76"/>
<g>
<rect x="97.2" y="230.56" style="fill:#8AD5DD;" width="26.24" height="42.4"/>
<rect x="184.64" y="161.36" style="fill:#8AD5DD;" width="26.24" height="111.6"/>
</g>
<rect x="228.32" y="89.6" style="fill:#FF5F5F;" width="26.24" height="183.36"/>
<rect x="272.08" y="126.64" style="fill:#8AD5DD;" width="26.24" height="146.4"/>
<rect x="315.76" y="185.6" style="fill:#FF5F5F;" width="26.24" height="87.68"/>
</svg>
</div>
<div class="sb-1-icon sb-ic-5">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path style="fill:#002833;" d="M0,355.28V31.36c0-5.76,4.72-10.48,10.48-10.48H501.6c5.68,0,10.4,4.72,10.4,10.48v323.92"/>
<g>
<path style="fill:#E8E8E8;" d="M512,355.28v41.76c0,5.76-4.72,10.48-10.48,10.48H10.48C4.72,407.52,0,402.8,0,397.04v-41.76H512z"
/>
<rect x="146.32" y="480.64" style="fill:#E8E8E8;" width="219.44" height="10.48"/>
</g>
<polygon style="fill:#C9C9C9;" points="329.12,480.64 182.88,480.64 193.28,407.52 318.72,407.52 "/>
<rect x="20.88" y="41.76" style="fill:#EFEFEF;" width="470.24" height="292.56"/>
<circle style="fill:#C9C9C9;" cx="167.28" cy="145.84" r="36.32"/>
<g>
<path style="fill:#002833;" d="M165.6,266.64l-35.12-76.08c0,0-36.8,0.48-36.8,34.32s0,41.68,0,41.68S165.84,266.64,165.6,266.64z"
/>
<path style="fill:#002833;" d="M169.04,266.64l35.12-76.08c0,0,36.8,0.48,36.8,34.32s0,41.68,0,41.68S168.72,266.64,169.04,266.64z
"/>
</g>
<polygon style="fill:#FF5F5F;" points="167.28,190.56 142,190.56 167.28,246.48 192.56,190.56 "/>
<g>
<rect x="282.48" y="135.84" style="fill:#C9C9C9;" width="135.6" height="10.48"/>
<rect x="282.48" y="167.2" style="fill:#C9C9C9;" width="135.6" height="10.48"/>
<rect x="282.48" y="198.56" style="fill:#C9C9C9;" width="135.6" height="10.48"/>
<rect x="282.48" y="229.84" style="fill:#C9C9C9;" width="135.6" height="10.48"/>
</g>
</svg>
</div>
</div>
<div class="sb-1-bot">
<div class="sb-page sb-pg-1">
<h2>Dedicated Team</h2>
<p>All of our editors are experienced SEO & content professionals. We build our strategy around your goals and function as an extension of your company.</p>
</div>
<div class="sb-page sb-pg-2">
<h2>Market Research</h2>
<p>We learn about every facet of your industry and competitor strategies to make sure your brand can connect with your target markets first. We go the extra mile by taking advantage of new market opportunities.</p>
</div>
<div class="sb-page sb-pg-3">
<h2>Proven Strategy</h2>
<p>We know what works and what doesn’t. By staying on top of Google’s algorithm updates and using time-tested methods, we can create interesting evergreen content with continuously growing traffic.</p>
</div>
<div class="sb-page sb-pg-4">
<h2>SEO</h2>
<p>We go the extra mile by restructuring and optimizing your site. We also have extensive off-page resources to ensure your content ranks high.</p>
</div>
<div class="sb-page sb-pg-5">
<h2>Branding & Authority</h2>
<p>We perform extensive research to ensure your content will be contributing to your field rather than just diluting it. Brand awareness will grow significantly, and your status as a trusted source will grow with it.</p>
</div>
</div>
<div class="sb-pg-timer"></div>
</div>
<!---
<div class="sb-1-line-2">
<div class="divider div-transparent"></div>
</div>
-->您永远不会更改文本部分的不透明度。您只需更改类，添加和删除 sb-active。
因此，文本的不透明度由 css 决定。如果向元素添加不透明度，它将覆盖 css。
相反，最初将 sb-active 类添加到元素中。
编辑：
工作示例：https://codepen.io/pen/MoRwpq
将动画栏移动到单独的函数以最初调用。
function animateBar()
{
var bar = $('.sb-pg-timer');
var origin = 0;
bar.animate({
'width': origin,
}, 0,function(){
$(this).animate({
'width' : '100%',
}, 3000, function() {
$(this).animate({
'width': origin,
}, 0)
})});
}