并排顯示文本-有解無憂

您好，我有以下代碼：

(function() {

  var quotes = $(".quotes");
  var quoteIndex = -1;

  function showNextQuote() {
      quoteIndex;
    quotes.eq(quoteIndex % quotes.length)
      .fadeIn(2000)
      .delay(2000)
      .fadeOut(2000, showNextQuote);
  }

  showNextQuote();

})();

.quotes {
  display: none;
}

#hero h1 {
 margin: 0;
  font-size: 64px;
  font-weight: 700;
  line-height: 56px;
  color: transparent;
   background: url("https://wallpaperaccess.com/full/2492815.jpg") repeat;
  background-clip: text;
  -webkit-background-clip: text;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id = "hero">
<h1 style="margin-bottom: 16px">Sample
  <div class="quotes">
    <h1> Text</h1>
  </div>
  <div class="quotes">
    <h1> Change</h1>
  </div>
</h1>
</section>

唯一的問題是文本在不同的行上對齊，我希望文本在同一行上或彼此并排，中間有一些邊距。我該如何解決？

另外，我怎樣才能使文本在到達單詞時停止交替change？基本上，它應該只在文本之間交替一次，然后停在單詞上change

uj5u.com熱心網友回復：

(function() {

  var quotes = $(".quotes");
  var quoteIndex = -1;

  function showNextQuote() {
      quoteIndex;
    quotes.eq(quoteIndex % quotes.length)
      .fadeIn(2000)
      .delay(2000)
      .fadeOut(2000, showNextQuote);
  }

  showNextQuote();

})();

.quotes {
  display: none;
}

#hero h1 {
 display: flex;
 margin: 0;
  font-size: 64px;
  font-weight: 700;
  line-height: 56px;
  color: transparent;
   background: url("https://wallpaperaccess.com/full/2492815.jpg") repeat;
  background-clip: text;
  -webkit-background-clip: text;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id = "hero">
<h1 style="margin-bottom: 16px">Sample
  <div class="quotes">
    <h1> Text</h1>
  </div>
  <div class="quotes">
    <h1> Change</h1>
  </div>
</h1>
</section>

只需將 display: flex 屬性添加到您的 h1 標簽，默認 div 是塊范圍的，因此它們占據整行。

uj5u.com熱心網友回復：

您可以將更改的文本放入像 a 這樣的行內元素中，span而不是像div.

然后只fadeIn對最后一個參考執行，因此不會showNextQuote再次呼叫。

(function() {

  var quotes = $(".quotes");
  var quoteIndex = -1;

  function showNextQuote() {
      quoteIndex;
    if (quoteIndex == quotes.length-1) {
      quotes.eq(quoteIndex % quotes.length)
        .fadeIn(2000);
    } else {
      quotes.eq(quoteIndex % quotes.length)
        .fadeIn(2000)
        .delay(2000)
        .fadeOut(2000, showNextQuote);
    }
  }

  showNextQuote();

})();

.quotes {
  display: none;
}

#hero h1 {
 margin: 0;
  font-size: 64px;
  font-weight: 700;
  line-height: 56px;
  color: transparent;
   background: url("https://wallpaperaccess.com/full/2492815.jpg") repeat;
  background-clip: text;
  -webkit-background-clip: text;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id = "hero">
<h1 style="margin-bottom: 16px">Sample
  <span class="quotes"> Text</span>
  <span class="quotes"> Change</span>
</h1>
</section>

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

標籤：

上一篇：添加到YouTube的畫布不可見

下一篇：旋轉按鈕并使邊緣保持水平