显示从 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 {

  font-family: arial, helvetica, sans-serif;

  color: rgb(255, 255, 255);

  background-color: rgb(0, 0, 0);

}

.slide {

  position: absolute;

  top: 0;

  left: 0;

  display: flex;

  justify-content: center;

  align-items: center;

  width: 100%;

  height: 70%;

  font-size: 6vw;

  opacity: 0;

}

.slide-1 {

  animation: showSlide 3s linear 0s;

}

.slide-2 {

  animation: showSlide 3s linear 3s;

}

.slide-3 {

  animation: showSlide 3s linear 6s;

}

.slide-4 {

  animation: showSlide 3s linear 9s;

}

.slide-5 {

  animation: showSlide 3s linear 12s;

}

@keyframes showSlide {

    0% {opacity: 0;}

   20% {opacity: 1;}

   80% {opacity: 1;}

  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() {

  $('#msg span').fadeOut(function() {

    $(this).text(new Date().toLocaleString())

  }).fadeIn();

  setTimeout(function() {

    setText();

  }, 2000);

}

setTimeout(function() {

  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">

  <span>Date time change start by every 2 second</span>

</div>

Answer 3

这是带有 setInterval 和 clearInterval 方法的简单解决方案，当您的“幻灯片放映”结束时，它会停止。

let texts = [

  '<div class="text" id="text_1">Hi!</div>',

  '<div class="text" id="text_2">We`re setting things up for you</div>',

  '<div class="text" id="text_3">Text3</div>'

]

var i = 0;

var timer = setInterval(function(){

  document.getElementsByTagName('container')[0].innerHTML = texts[i];

  ++i;

  if(i == texts.length){

    window.clearInterval(timer);

    document.getElementById("text_"+i).style.cssText = "animation:1s fadeLast ease;opacity:1;"

  }

},1500)

body{

  background: black;

  color:white;

  font-family: sans-serif;

  margin:0

}

*{

  -webkit-box-sizing: border-box;

  box-sizing:border-box

}

container{

  display:flex;

  justify-content:center;

  align-items:center;

  width:100vw;

  height:100vh;

}

.text{

  font-size:2rem;

  opacity:0;

  animation: 1.5s fadeIn ease

}

@keyframes fadeIn{

  0%{opacity:0}

  50%{opacity:1}

  100%{opacity:0}

}

@keyframes fadeLast{

  from{opacity:0}

  to{opacity:1}

}

<container></container>