循环浏览重叠的文本

问题描述

我正在尝试在单个单词中循环，这些单词会淡入/淡出并且可以使这个工作，尽管我想这样做，以便在第一个完全消失之前单词之间有轻微的重叠。

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>

小提琴：https://jsfiddle.net/2020_RG/8fhqbcw5/

解决方法

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

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

另请注意，要使单词在 DOM 中占据相同的空间，它们的 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>