如何解决循环浏览重叠的文本
我正在尝试在单个单词中循环,这些单词会淡入/淡出并且可以使这个工作,尽管我想这样做,以便在第一个完全消失之前单词之间有轻微的重叠。
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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。