jQueryの/ CSS - のsetInterval初期状態の問題

私はたびにスライドの変更をリセットし、アニメーションタイマーバーがあり少しスライドショーボックスの事をした - あなたはここで働いそれを見ることができます：https://codepen.io/JTBennett/pen/JJzZqK jQueryの/ CSS - のsetInterval初期状態の問題

私の問題は、ということです最初のスライドの初期状態は不透明度が0に設定されていますが、最初から表示されるようにしたいと思います。私は不透明度にそのスライドだけのCSSを設定しようとしました：1、しかしそれは何らかの理由でサイクル全体に見えるままです。

また、ループの開始を調整しようとしましたが、前のスライドを完全に切り捨てました。

（私はそれがスパゲッティだと知っているので、私は吸う）ので、ここでジャバスクリプトを投稿するつもりですが、あなたがcodepenで実際にそれを見ると分かりやすいかもしれません。

最初のスライド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); 

});

出典

2017-07-15 Joel

最初のスライドが最初から表示されています。 Chromium 59.0.3071.109-0ubuntu0.16.04.1291 – qiAlex

不透明度をテストする要素は、設定している要素とは異なります。 –

@qiAlex私は彼がアイコンではなくテキストについていると思います。 – Win

デフォルトの状態として不透明度を設定する必要はありませんが、あなたはsb-pg-1のdivのデフォルトクラスとしてsb-activeクラスを設定したいです。私として

$(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 { 
 
\t position: relative; 
 
\t height: 1px; 
 
} 
 
.div-transparent:before { 
 
\t content: ""; 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 5%; 
 
\t right: 5%; 
 
\t width: 90%; 
 
\t height: 1px; 
 
\t 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" 
 
\t 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> 
 
\t <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" 
 
\t \t /> 
 
\t <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> 
 
\t <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"/> 
 
\t <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> 
 
\t <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"/> 
 
\t <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" 
 
\t viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"> 
 
<g> 
 
\t <rect x="251.28" y="28.4" style="fill:#C9C9C9;" width="9.44" height="9.44"/> 
 
\t <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 
 
\t \t 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 
 
\t \t 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 
 
\t \t v-18.96h9.44V151.68z M260.72,113.76h-9.44V94.8h9.44V113.76z M260.72,75.76h-9.44V56.8h9.44V75.76z"/> 
 
\t <rect x="251.28" y="474.24" style="fill:#C9C9C9;" width="9.44" height="9.44"/> 
 
\t <rect x="452.96" y="130.56" style="fill:#C9C9C9;" width="9.44" height="9.44"/> 
 
\t <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 
 
\t \t 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"/> 
 
\t <rect x="452.96" y="354.88" style="fill:#C9C9C9;" width="9.44" height="9.44"/> 
 
\t <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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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"/> 
 
\t <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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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" 
 
\t \t /> 
 
</g> 
 
<g> 
 
\t <circle style="fill:#FF5F5F;" cx="457.76" cy="131.04" r="25.76"/> 
 
\t <circle style="fill:#FF5F5F;" cx="457.76" cy="364.48" r="25.76"/> 
 
</g> 
 
<g> 
 
\t <rect x="49.52" y="130.56" style="fill:#C9C9C9;" width="9.44" height="9.44"/> 
 
\t <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 
 
\t \t 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 
 
\t \t v19.52H59.04z"/> 
 
\t <rect x="49.52" y="354.88" style="fill:#C9C9C9;" width="9.44" height="9.44"/> 
 
</g> 
 
<g> 
 
\t <circle style="fill:#FF5F5F;" cx="54.24" cy="131.04" r="25.76"/> 
 
\t <circle style="fill:#FF5F5F;" cx="54.24" cy="364.48" r="25.76"/> 
 
\t <circle style="fill:#FF5F5F;" cx="256" cy="256" r="25.76"/> 
 
\t <circle style="fill:#FF5F5F;" cx="256" cy="25.76" r="25.76"/> 
 
\t <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" 
 
\t 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> 
 
\t <rect y="9.92" style="fill:#002833;" width="512" height="21.36"/> 
 
\t <rect y="372.56" style="fill:#002833;" width="512" height="21.36"/> 
 
\t <rect x="165.36" y="452.56" style="fill:#002833;" width="192" height="10.64"/> 
 
</g> 
 
<g> 
 
\t <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 
 
\t \t 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 
 
\t \t 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 
 
\t \t L99.12,164z"/> 
 
\t <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 
 
\t \t 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 
 
\t \t 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 
 
\t \t L215.36,164L215.36,164z"/> 
 
\t <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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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" 
 
\t viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"> 
 
<g> 
 
\t <polygon style="fill:#FF5F5F;" points="431.12,512 382.8,463.68 448.8,397.68 498.16,447.04 \t "/> 
 
\t 
 
\t \t <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> 
 
\t 
 
\t \t <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"/> 
 
\t <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> 
 
\t <rect x="97.2" y="230.56" style="fill:#8AD5DD;" width="26.24" height="42.4"/> 
 
\t <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" 
 
\t 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> 
 
\t <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" 
 
\t \t /> 
 
\t <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> 
 
\t <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" 
 
\t \t /> 
 
\t <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 
 
\t \t "/> 
 
</g> 
 
<polygon style="fill:#FF5F5F;" points="167.28,190.56 142,190.56 167.28,246.48 192.56,190.56 "/> 
 
<g> 
 
\t <rect x="282.48" y="135.84" style="fill:#C9C9C9;" width="135.6" height="10.48"/> 
 
\t <rect x="282.48" y="167.2" style="fill:#C9C9C9;" width="135.6" height="10.48"/> 
 
\t <rect x="282.48" y="198.56" style="fill:#C9C9C9;" width="135.6" height="10.48"/> 
 
\t <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> 
 
-->

出典

2017-07-15 23:11:34 Win

私はほとんどそれを直前に持っていましたが、私はsetIntervalからそれをやろうとしていました - それをクリアしてくれてありがとう！ – Joel

続ける！あなたはすばらしいことをしています:) – Win

ありがとう！私はあなたが別のウィンドウやタブに行くとコードが（codepen上に）行く間、あなたがそれに戻ったときにループがすべて台無しになることに気づいた。私は誰かがウィンドウを切り替えるときに私が事をリセットするために使用できるイベントリスナーがあるかどうか疑問に思っています...多分それはばかげています – Joel

テキスト部分の不透明度を変更することは決してありません。クラスを変更し、sb-activeを追加して削除するだけです。

したがって、テキストの不透明度はCSSによって決定されます。要素に不透明度を追加すると、cssがオーバーライドされます。

代わりに、sb-activeクラスを最初に要素に追加します。

EDIT：

作業例：https://codepen.io/pen/MoRwpq

は当初呼び出すために別の関数にanimateBarを移動しました。

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) 
        })}); 

    }

出典

2017-07-15 23:10:32

これも良いことです - 初めてバーをロードすることもできました – Joel

jQueryの/ CSS - のsetInterval初期状態の問題

答えて

関連する問題