CSS анимация с задержкой между текстом - PullRequest
Новая
       23

CSS анимация с задержкой между текстом

0 голосов
/ 14 сентября 2018

Я попытался сделать анимацию, чтобы, когда пользователь открывает мой сайт, анимация начала воспроизводиться.

Он должен начинаться с показа первого h1, а затем через 1 с он должен исчезнуть и показывать второй h1, а еще через 1 с 2-й h1 исчезает, а затем показывается 3-й 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 (), это не сработало.

Ответы [ 3 ]

0 голосов
/ 14 сентября 2018

Похоже, вы запутались, используя CSS и jQuery одновременно.

Я бы порекомендовал вам либо выполнять эту анимацию строго с использованием CSS-анимации, либо с помощью методов jQuery (но не обоих).

Использование CSS анимация 

.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>
0 голосов
/ 14 сентября 2018

Я хотел бы добавить к ответу @ Taplar, воспользовавшись setInterval, позволяющим функции проходить через дочерние элементы .intro-text самостоятельно: 

$(document).ready(function(){
    var intros = $(".intro-text").children();
    var index = 0;
    setInterval(function(){
        if(index < intros.length){
            intros.hide();
            $(intros[index]).show();
            index++;
        }
    }, 1000)
});
0 голосов
/ 14 сентября 2018

Вы можете использовать тайм-аут для достижения этой функции. 

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

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

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