显示从 x 时间到 x 时间的文本（并且它将继续用于下一个文本），如演示

Question

我试图像演示文稿一样显示文本。我试过这个代码

setTimeout(fade_out, 2000);

function fade_out() {

$("#msg").fadeOut().empty();

}

和

<div id="msg"> John (First appear)</div>

<div id="msg"> Doe (Second appear)</div>

但它只是显示，然后隐藏了这个词

如何使文本连续出现和消失（例如在 x 时间出现并在 y 时间消失的函数），因为我对 Javascript 知之甚少。

例子：

Answer 1

您也可以单独使用 CSS 来实现这种效果。这是一种完全合法的方法，因为 CSS 负责 Web 文档中的表示层。工作示例：body {&nbsp; font-family: arial, helvetica, sans-serif;&nbsp; color: rgb(255, 255, 255);&nbsp; background-color: rgb(0, 0, 0);}.slide {&nbsp; position: absolute;&nbsp; top: 0;&nbsp; left: 0;&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; align-items: center;&nbsp; width: 100%;&nbsp; height: 70%;&nbsp; font-size: 6vw;&nbsp; opacity: 0;}.slide-1 {&nbsp; animation: showSlide 3s linear 0s;}.slide-2 {&nbsp; animation: showSlide 3s linear 3s;}.slide-3 {&nbsp; animation: showSlide 3s linear 6s;}.slide-4 {&nbsp; animation: showSlide 3s linear 9s;}.slide-5 {&nbsp; animation: showSlide 3s linear 12s;}@keyframes showSlide {&nbsp; &nbsp; 0% {opacity: 0;}&nbsp; &nbsp;20% {opacity: 1;}&nbsp; &nbsp;80% {opacity: 1;}&nbsp; 100% {opacity: 0;}}<p class="slide slide-1">Hi!</p><p class="slide slide-2">We're setting things up for you</p><p class="slide slide-3">Getting there...</p><p class="slide slide-4">Just a little bit more...</p><p class="slide slide-5">Thanks for your patience.</p>

Answer 2

你可以使用fadeOut()和.fadeIn()。当您更改值时，您可以使用fadeIn()请检查下面的代码片段function setText() {&nbsp; $('#msg span').fadeOut(function() {&nbsp; &nbsp; $(this).text(new Date().toLocaleString())&nbsp; }).fadeIn();&nbsp; setTimeout(function() {&nbsp; &nbsp; setText();&nbsp; }, 2000);}setTimeout(function() {&nbsp; setText();}, 2000);.msg{display:flex;justify-content:center;align-items:center;width:100%;height:122px}body{background:#000;color:#fff;font-family:sans-serif;margin:0}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="msg" class="msg">&nbsp; <span>Date time change start by every 2 second</span></div>

Answer 3

这是带有 setInterval 和 clearInterval 方法的简单解决方案，当您的“幻灯片放映”结束时，它会停止。let texts = [&nbsp; '<div class="text" id="text_1">Hi!</div>',&nbsp; '<div class="text" id="text_2">We`re setting things up for you</div>',&nbsp; '<div class="text" id="text_3">Text3</div>']var i = 0;var timer = setInterval(function(){&nbsp; document.getElementsByTagName('container')[0].innerHTML = texts[i];&nbsp; ++i;&nbsp; if(i == texts.length){&nbsp; &nbsp; window.clearInterval(timer);&nbsp; &nbsp; document.getElementById("text_"+i).style.cssText = "animation:1s fadeLast ease;opacity:1;"&nbsp; }},1500)body{&nbsp; background: black;&nbsp; color:white;&nbsp; font-family: sans-serif;&nbsp; margin:0}*{&nbsp; -webkit-box-sizing: border-box;&nbsp; box-sizing:border-box}container{&nbsp; display:flex;&nbsp; justify-content:center;&nbsp; align-items:center;&nbsp; width:100vw;&nbsp; height:100vh;}.text{&nbsp; font-size:2rem;&nbsp; opacity:0;&nbsp; animation: 1.5s fadeIn ease}@keyframes fadeIn{&nbsp; 0%{opacity:0}&nbsp; 50%{opacity:1}&nbsp; 100%{opacity:0}}@keyframes fadeLast{&nbsp; from{opacity:0}&nbsp; to{opacity:1}}<container></container>