我在这里有点新手，虽然我可以按自己的意愿来运行此代码，但我敢肯定，这是一种更好的编写方法。
工作原理
由于前三段已经在视图中，因此我在滚动功能之外运行它们。其他5个段落在观看时仅与前三个段落运行相同的动画。尽管我承认我相信它们会在div2被击中时立即运行，但我希望它们在被击中时才运行。 （这是一个旁注，如果您有任何想法可以使它更好地工作）。
目标
我觉得有一种更好的方式写这篇文章，它并不那么冗长。如果您对在这种情况下谁可以编写更好的代码有任何见解，我一定会感激的！我还想知道是否有办法在进入每个div时在每个div上触发动画（淡入并向右滑动），而不是在到达div时正在运行所有div（4-8）的当前功能2.（我希望这是有道理的。）
在演示站点上放置
（以防万一，您想看看它的住处）
https://stable.stable-demos.com/who-we-are/
提前谢谢！
jQuery(function($) {
// WHAT WE DO - ANIMATE PARAGRAPHS With FADE IN FROM LEFT
var done = false;
$(window).scroll(function() {
if (!done) {
var y = $(window).scrollTop(),
x = $('.div2').offset().top - 10;
if (y > x) {
done = true;
$('.div4')
.delay(0)
.animate({
opacity: 1,
marginLeft: '+=50'
});
}
if (y > x) {
done = true;
$('.div5')
.delay(1000)
.animate({
opacity: 1,
marginLeft: '+=50'
});
}
if (y > x) {
done = true;
$('.div6')
.delay(2000)
.animate({
opacity: 1,
marginLeft: '+=50'
});
}
if (y > x) {
done = true;
$('.div7')
.delay(3000)
.animate({
opacity: 1,
marginLeft: '+=50'
});
}
if (y > x) {
done = true;
$('.div8')
.delay(4000)
.animate({
opacity: 1,
marginLeft: '+=50'
});
}
}
});
// THESE RUN RIGHT AWAY BECAUSE THEY"RE IN VEIW
$('.div1').delay(300).animate({
opacity: 1,
"margin-left": '+=50'
}, 900);
$('.div2').delay(1200).animate({
opacity: 1,
"margin-left": '+=50'
}, 900);
$('.div3').delay(1900).animate({
opacity: 1,
"margin-left": '+=50'
}, 900);
}); // End jQuery.div1,
.div2,
.div3,
.div4,
.div5,
.div6,
.div7,
.div8 {
opacity: 0;
font-size: 48px;
margin-left: -50px;
font-size: 12px!important;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="min-height: 2000px">
<div class="div1">
<h2 class="space_groteskmedium large-font uppercase">We come in, put our heads down, work hard, and have a hell of a time doing it. we’ve built and are continuing to build a team of great people who do great work.</h2>
</div>
<div class="div2">
<h2 class="space_groteskmedium large-font uppercase">We come in, put our heads down, work hard, and have a hell of a time doing it. we’ve built and are continuing to build a team of great people who do great work.</h2>
</div>
<div class="div3">
<h2 class="space_groteskmedium large-font uppercase">We come in, put our heads down, work hard, and have a hell of a time doing it. we’ve built and are continuing to build a team of great people who do great work.</h2>
</div>
<div class="div4">
<h2 class="space_groteskmedium large-font uppercase">We come in, put our heads down, work hard, and have a hell of a time doing it. we’ve built and are continuing to build a team of great people who do great work.</h2>
</div>
<div class="div5">
<h2 class="space_groteskmedium large-font uppercase">We come in, put our heads down, work hard, and have a hell of a time doing it. we’ve built and are continuing to build a team of great people who do great work.</h2>
</div>
<div class="div6">
<h2 class="space_groteskmedium large-font uppercase">We come in, put our heads down, work hard, and have a hell of a time doing it. we’ve built and are continuing to build a team of great people who do great work.</h2>
</div>
<div class="div7">
<h2 class="space_groteskmedium large-font uppercase">We come in, put our heads down, work hard, and have a hell of a time doing it. we’ve built and are continuing to build a team of great people who do great work.</h2>
</div>
<div class="div8">
<h2 class="space_groteskmedium large-font uppercase">We come in, put our heads down, work hard, and have a hell of a time doing it. we’ve built and are continuing to build a team of great people who do great work.</h2>
</div>
</div>