我尝试制作动画,以便当用户打开我的网站时动画开始播放。
它应该首先显示第一个 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() 时它不起作用。
最佳答案
您可以使用超时来实现此功能。
$(document).ready(function(){
var $introText = $(".intro-text-1");
$introText.css("display", "block");
setTimeout(function(){
$introText.css("display", "none");
}, 2000);
});
关于jquery - css jquery 动画,文本之间有延迟,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52321772/