jquery - css jquery 动画，文本之间有延迟

Question

我尝试制作动画，以便当用户打开我的网站时动画开始播放。

它应该首先显示第一个 h1 ，然后 1 秒后它应该消失并显示第二个 h1 ，再过 1 秒后，第二个 h1 消失，然后显示第三个 h1 等等。我找到了 jquery .delay() 但我不知道如何在这里使用它。我已经有了一些代码。

如果有人能帮助我，我会很高兴。

<div class="intro">
<div class="intro-text">
  <h1 class="intro-text-1">Hi</h1>
  <h1 class="intro-text-2">My</h1>
  <h1 class="intro-text-3">Name</h1>
  <h1 class="intro-text-4">Is</h1>
</div>

 .intro-text h1 {
  text-align: center;
  color: #fff;
  left: 0;
  right: 0;
  display: none;
  animation: fadein 2s;
}

@keyframes fadein {
  from {opacity: 0;}
  to {opacity: 1;}
}


$(document).ready(function(){
  $(".intro-text-1").css("display", "block");
//   $(".intro-text-1").delay(2000).css("display", "none");
});

但是当我尝试 .delay() 时它不起作用。

Answer 1

您可以使用超时来实现此功能。

$(document).ready(function(){
  var $introText = $(".intro-text-1");

  $introText.css("display", "block");

  setTimeout(function(){
    $introText.css("display", "none");
  }, 2000);
});