Question

我制作了一个带有动画计时器栏的小型幻灯片盒，每次幻灯片更改时都会重置 - 你可以看到它在这里工作：https://codepen.io/JTBennett/pen/JJzZqK

我的问题是第一张幻灯片的初始状态的不透明度设置为0，但我希望它从一开始就可见。我已经尝试将该幻灯片的css设置为不透明度：1，但是由于某种原因它在整个周期中仍然可见。

我也尝试调整循环的开始，但它完全删除了之前的幻灯片。

我将在这里发布javascript，因为（我知道它是意大利面条，我很糟糕），但是如果你在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);

});

Answer 1

您永远不会更改文本部分的不透明度。您只需更改类，添加和删除sb-active。

因此，文本的不透明度由css决定。如果为元素添加不透明度，它将覆盖css。

相反，最初将sb-active类添加到元素中。

编辑：

工作示例：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)
                    })});

  }

Answer 2

您不希望将不透明度设置为默认状态，但您希望将sb-active类设置为sb-pg-1 div的默认类。

＆＃13;

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

＆＃13;

/*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;}

＆＃13;

<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>
-->

＆＃13;

jQuery / CSS - setInterval初始状态问题

2 个答案: