我写了这个时间轴，当用户滚动到屏幕中间然后显示动画，但是每次条件为真时都会重复，所以我如何设置它第一次显示动画，然后延迟5s然后如果条件为是的，它会再次显示动画吗？ （https://codepen.io/kuro-1996/pen/povRbzJ）
$(document).ready(function() {
var time = $(".item__time");
var content = $(".item__content");
答案 0 :(得分：1)
声明一个值为boolean的全局变量，以便我们可以在任何地方访问。当页面滚动到达结尾时，将变量更新为false值。在动画检查之前，如果animateMe是true，请对其进行动画处理，否则请停止。
$(document).ready(function() {
var time = $(".item__time");
var content = $(".item__content");
let animateMe = true;
$(window).scroll(function() {
for (var i = 0; i < time.length; i++) {
if ( animateMe === true &&
$(this).scrollTop() >
$(time[i]).offset().top + 8 +
$(time[i]).height() / 2 -
$(window).height() / 2
)
{ //console.log(window.pageYOffset);
// if it reaches to end then,animateMe true
if( window.pageYOffset > 1452 ) animateMe = false;
console.log()
// animate only if true
if( animateMe === true && $(time[i])[0].classList[1] !== 'active' ) {
if ($(time[i]).hasClass("change")) $(time[i]).removeClass("change");
$(time[i]).addClass("active");
$(content[i]).addClass("active");
}
}
// check if the animateMe is false, so stop it
if ( animateMe === true && $(time[i])[0].classList[1] !== 'active' &&
$(this).scrollTop() <
$(time[i]).offset().top +
$(time[i]).height() / 2 -
$(window).height() / 2
)
if ($(time[i]).hasClass("active")) {
$(time[i]).addClass("change");
$(time[i]).removeClass("active");
}
}
});
});body {
background-color: #25303b;
}
body p {
margin: 0;
}
@keyframes roll1 {
0% {
transform: rotate(-360deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes roll2 {
0% {
transform: rotate(-360deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes slideDown {
0% {
opacity: 1;
transform: translateY(-100%);
}
50% {
opacity: 1;
transform: translateY(8%);
}
65% {
opacity: 1;
transform: translateY(-4%);
}
80% {
opacity: 1;
transform: translateY(4%);
}
95% {
opacity: 1;
transform: translateY(-2%);
}
100% {
opacity: 1;
transform: translateY(0%);
}
}
.top {
min-height: 500px;
}
.bot {
min-height: 500px;
}
.timeline .timeline__block {
display: flex;
margin-bottom: 15px;
}
@media screen and (max-width: 991px) {
.timeline .timeline__block {
display: block;
max-width: 80%;
margin: 15px auto;
}
}
.timeline .timeline__block .block__item {
position: relative;
width: 50%;
display: flex;
justify-content: center;
}
@media screen and (max-width: 991px) {
.timeline .timeline__block .block__item {
width: 100%;
}
}
.timeline .timeline__block .block__item .item__time {
display: block;
width: 50px;
height: 50px;
background-color: #25303b;
border-radius: 50%;
border: 2px solid #ccc;
text-align: center;
color: #ccc;
padding-top: 3px;
position: absolute;
right: -25px;
z-index: 2;
}
.timeline .timeline__block .block__item .item__time.active {
animation: roll1 1s;
}
.timeline .timeline__block .block__item .item__time.change {
animation: roll2 1s;
}
@media screen and (max-width: 767px) {
.timeline .timeline__block .block__item .item__time {
padding-top: 7px;
}
}
@media screen and (max-width: 375px) {
.timeline .timeline__block .block__item .item__time {
padding-top: 2px;
width: 40px;
height: 40px;
}
}
.timeline .timeline__block .block__item .item__time p {
font-size: 9px;
}
.timeline .timeline__block .block__item .item__time .big {
font-size: 12px;
font-weight: 700;
}
.timeline .timeline__block .block__item .item__content {
width: 60%;
position: relative;
opacity: 0;
border-radius: 10px;
}
.timeline .timeline__block .block__item .item__content.active {
animation: slideDown 1s;
opacity: 1;
}
@media screen and (max-width: 767px) {
.timeline .timeline__block .block__item .item__content {
margin-left: 80px;
}
}
.timeline .timeline__block .block__item .item__content h2 {
height: 50px;
line-height: 50px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
padding: 0 15px 0 15px;
color: #ffffff;
font-size: 20px;
}
.timeline .timeline__block .block__item .item__content p {
background: #ffffff;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
padding: 3px 15px;
}
@media screen and (max-width: 767px) {
.timeline .timeline__block .block__item .item__content p {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
.timeline .timeline__block:nth-child(odd) .block__item::after {
content: "";
width: 2px;
height: 100%;
background-color: #ccc;
position: absolute;
right: -1px;
top: 15px;
}
@media screen and (max-width: 991px) {
.timeline .timeline__block:nth-child(odd) .block__item::after {
left: 24px;
}
}
@media screen and (max-width: 767px) {
.timeline .timeline__block:nth-child(odd) .block__item::after {
left: 49px;
}
}
@media screen and (max-width: 375px) {
.timeline .timeline__block:nth-child(odd) .block__item::after {
left: 44px;
}
}
@media screen and (max-width: 991px) {
.timeline .timeline__block:nth-child(odd) .block__item .item__time {
left: 0;
}
}
@media screen and (max-width: 767px) {
.timeline .timeline__block:nth-child(odd) .block__item .item__time {
left: 25px;
}
}
.timeline .timeline__block:nth-child(odd) .block__item .item__content::after {
content: "";
height: 15px;
position: absolute;
background-color: inherit;
top: 15px;
width: 15px;
right: -5px;
transform: rotate(45deg);
}
@media screen and (max-width: 991px) {
.timeline .timeline__block:nth-child(odd) .block__item .item__content::after {
right: unset;
left: -5px;
transform: rotate(-45deg);
}
}
.timeline .timeline__block:nth-child(even) {
flex-flow: row-reverse;
}
.timeline .timeline__block:nth-child(even) .block__item::before {
content: "";
width: 2px;
height: 100%;
background-color: #ccc;
position: absolute;
left: -1px;
top: 15px;
}
@media screen and (max-width: 991px) {
.timeline .timeline__block:nth-child(even) .block__item::before {
left: 24px;
}
}
@media screen and (max-width: 767px) {
.timeline .timeline__block:nth-child(even) .block__item::before {
left: 49px;
}
}
@media screen and (max-width: 375px) {
.timeline .timeline__block:nth-child(even) .block__item::before {
left: 44px;
}
}
.timeline .timeline__block:nth-child(even) .block__item .item__time {
left: -25px;
right: unset;
}
@media screen and (max-width: 991px) {
.timeline .timeline__block:nth-child(even) .block__item .item__time {
left: 0;
}
}
@media screen and (max-width: 767px) {
.timeline .timeline__block:nth-child(even) .block__item .item__time {
left: 25px;
}
}
.timeline .timeline__block:nth-child(even) .block__item .item__content::after {
content: "";
height: 15px;
position: absolute;
background-color: inherit;
top: 15px;
width: 15px;
z-index: 1;
left: -5px;
transform: rotate(-45deg);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="top"></div>
<div class="container timeline">
<div class="timeline__block">
<div class="block__item">
<div class="item__time">
<p>30<sup>th</sup></p>
<p class="big">JAN</p>
<p>2015</p>
</div>
<div class="item__content" style="background-color: #E74C3C;">
<h2>THE TITLE</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua
</p>
</div>
</div>
</div>
<div class="timeline__block">
<div class="block__item">
<div class="item__time">
<p>30<sup>th</sup></p>
<p class="big">JAN</p>
<p>2014</p>
</div>
<div class="item__content" style="background-color: #2ECC71;">
<h2>THE TITLE</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua
</p>
</div>
</div>
</div>
<div class="timeline__block">
<div class="block__item">
<div class="item__time">
<p>30<sup>th</sup></p>
<p class="big">JAN</p>
<p>2013</p>
</div>
<div class="item__content" style="background-color: #E67E22;">
<h2>THE TITLE</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua
</p>
</div>
</div>
</div>
<div class="timeline__block">
<div class="block__item">
<div class="item__time">
<p>30<sup>th</sup></p>
<p class="big">JAN</p>
<p>2012</p>
</div>
<div class="item__content" style="background-color: #1ABC9C;">
<h2>THE TITLE</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua
</p>
</div>
</div>
</div>
<div class="timeline__block">
<div class="block__item">
<div class="item__time">
<p>30<sup>th</sup></p>
<p class="big">JAN</p>
<p>2011</p>
</div>
<div class="item__content" style="background-color: #824B99;">
<h2>THE TITLE</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua
</p>
</div>
</div>
</div>
<div class="timeline__block">
<div class="block__item">
<div class="item__time">
<p>30<sup>th</sup></p>
<p class="big">JAN</p>
<p>2010</p>
</div>
<div class="item__content" style="background-color: #1ABC9C;">
<h2>THE TITLE</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua
</p>
</div>
</div>
</div>
<div class="timeline__block">
<div class="block__item">
<div class="item__time">
<p>30<sup>th</sup></p>
<p class="big">JAN</p>
<p>2009</p>
</div>
<div class="item__content" style="background-color: #824B99;">
<h2>THE TITLE</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua
</p>
</div>
</div>
</div>
</div>
<div class="bot"></div>
</body>
快乐的科丁！！