Отображать текст от времени 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

Вы можете использовать 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 2

Вы также можете добиться этого эффекта, используя только CSS.

Это вполне законный подход, поскольку CSS отвечает за уровень представления в веб-документах.

Рабочий пример:

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