循环浏览重叠的文本

Question

我正在尝试循环显示会淡出 in/fade 的单个单词并使其正常工作，尽管我想做到这一点，以便在第一个单词完全消失之前单词之间有轻微的重叠。

var divs = $('div[id^="title-"]').hide(),
  i = 0;

(function cycle() {
  divs.eq(i).fadeIn(800).delay(600).fadeOut(700, cycle);
  i = ++i % divs.length;
})();

#title-1,
#title-2,
#title-3 {
  font-size: 10vw;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="title-1">Bam</div>
<div id="title-2">Bang</div>
<div id="title-3">Blah</div>

Fiddle: https://jsfiddle.net/2020_RG/8fhqbcw5/

Answer 1

要使文字效果在字词之间重叠，您可以使用 setTimeout() 在显示下一个字词之前稍微提前显示下一个字词。您无法使用 fadeOut() 回调实现此目的，因为它仅在上一个动画完成时触发。

要使这项工作正常进行，请定义一个超时，该超时将运行稍微在元素上排队的所有操作完成之前。在下面的示例中，我使用了 300 毫秒的重叠，但这可以根据您的需要进行修改。

另请注意，对于在 DOM 中占据相同 space 的单词，它们的 CSS position 需要设置为 absolute， fixed 或 sticky.

var divs = $('div[id^="title-"]'),
  i = 0;

(function cycle() {
  divs.eq(i).fadeIn(800).delay(600).fadeOut(700);
  i = ++i % divs.length;
  setTimeout(cycle, 1800);
})();

#title-1,
#title-2,
#title-3 {
  font-size: 10vw;
  position: absolute;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="title-1">Bam</div>
<div id="title-2">Bang</div>
<div id="title-3">Blah</div>

循环浏览重叠的文本

Cycle through text with overlap

javascript

jquery

fadein

fadeout

cycle