css jquery动画与文本之间的延迟答案

【问题标题】：css jquery animation with delay between textcss jquery动画与文本之间的延迟
【发布时间】：2018-09-13 21:02:38
【问题描述】：

我尝试制作动画，这样当用户打开我的网站时，动画就会开始播放。

它应该首先显示第一个 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() 时它不起作用。

【问题讨论】：

css() 按照 jQuery 标准不执行动画。 jQuery 将“动画”等同于一种方法，它使用它的内部动画队列来创建原生动画的外观。由于您没有使用 jQuery 动画，delay() 将被忽略。参考。 api.jquery.com/delay

标签： jquery html css jquery-animate css-animations

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

您似乎对同时使用 CSS 和 jQuery 感到困惑。

我建议您要么严格使用 CSS 动画来执行此动画，要么使用 jQuery 的方法（但不能同时使用两者）。

使用 CSS animation

.intro-text.css h1 {
  opacity: 0;
  animation-name: fadein;
  animation-duration: 2s;
}

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

.css .intro-text-1 {
  animation-delay: 0s;
}

.css .intro-text-2 {
  animation-delay: 1s;
}

.css .intro-text-3 {
  animation-delay: 2s;
}

.css .intro-text-4 {
  animation-delay: 3s;
}

h1 {
  margin: 0;
}

<div class="intro-text css">
  <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>

使用 jQuery .animate()

$(function() {


  $(".intro-text.js h1").each(function(index) {
    $(this).css('opacity', 0);
    $(this).delay(1000 * index).animate({
      opacity: 1
    }, 2000, function() {
      $(this).css('opacity', 0)
    });
  });

})

h1 {
  margin: 0;
}

<script src="https://code.jquery.com/jquery-1.12.3.js" integrity="sha256-1XMpEtA4eKXNNpXcJ1pmMPs8JV+nwLdEqwiJeCQEkyc=" crossorigin="anonymous"></script>


<div class="intro-text js">
  <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>

【讨论】：

【解决方案3】：

我想通过利用setInterval 让函数自己循环通过.intro-text 的子级来添加@Taplar 的答案：

$(document).ready(function(){
    var intros = $(".intro-text").children();
    var index = 0;
    setInterval(function(){
        if(index < intros.length){
            intros.hide();
            $(intros[index]).show();
            index++;
        }
    }, 1000)
});

【讨论】：