循环通过有重叠的文本

Question

我试图循环单一的单词，将淡入/淡出，并能得到这项工作，虽然我想让它在第一个词完全消失之前有一个轻微的重叠。

​

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/

Answer 1

要使文本效果在单词之间重叠，可以使用setTimeout()在显示下一个单词之前稍微显示下一个单词。您不能通过fadeOut()回调来实现这一点，因为只有在之前的动画完成后才会触发。

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

还请注意，要想在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>

​