所以我希望我的页面上的部分有这个很酷的效果，用户滚动到元素并且部分向上移动，看起来部分只是淡入。为此我使用jquery选择器添加一个类我希望动画的元素。
问题：由于我使用css类和jquery选择器来动画对象并且我有很多动画部分，这会产生一个错误，只有第一个元素出现在屏幕上，有没有办法解决这个问题？
我不想为每个部分创建不同的类......
$(window).scroll(function() {
var hT = $('.mover_on').offset().top,
hH = $('.mover_on').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
if (wS > (hT+hH-wH) && (hT > wS) && (wS+wH > hT+hH)){
$('.mover_left').addClass('mover_left_end');
$('.mover_middle').addClass('mover_middle_end');
$('.mover_right').addClass('mover_right_end');
} else {
}
});body{width:100%; height:auto; display:flex; flex-direction:column; padding:250px 0px;}
.mover_container_400{width:100% !important; height:400px !important; position:relative !important; overflow:hidden !important;}
.mover_container_500{width:100% !important; height:500px !important; position:relative !important; overflow:hidden !important;}
.mover_left{top:100% !important; left:0% !important; position:absolute !important; transition:all 900ms ease;}
.mover_middle{top:100% !important; left:50% !important; position:absolute !important; transform:translateX(-50%); transition:all 1300ms ease;}
.mover_right{top:100% !important; right:0% !important; position:absolute !important; transition:all 1800ms ease;}
.mover_left_end{top:3% !important; left:0% !important; position:absolute !important;}
.mover_middle_end{top:3% !important; left:50% !important; position:absolute !important; transform:translateX(-50%);}
.mover_right_end{top:3% !important; right:0% !important; position:absolute !important;}
.reviews_contents_container{width:100%; height:auto; display:flex; justify-content:space-around;}
.reviews_content_container{box-shadow:2px 2px 2px rgba(0,0,0,0.2); width:32%; min-height:250px; border-radius:15px; background-color:#E5E5E5; position:relative; padding:50px 35px; margin:25px 0px;}
.reviews_content_dot_top{width:20px; height:20px; background-color:white; border-radius:50%; position:absolute; left:50%; transform:translateX(-50%); top:10px;}
.reviews_content_dot_left{width:20px; height:20px; background-color:white; border-radius:50%; position:absolute; bottom:10px; left:10px;}
.reviews_content_dot_right{width:20px; height:20px; background-color:white; border-radius:50%; position:absolute; bottom:10px; right:10px;}
.reviews_content_paragraph{width:100%; height:auto; margin-bottom:20px; position:relative; font-size:16px; font-weight:400; color:rgba(0,0,0,0.9); line-height:22px;}
.reviews_content_author{width:100%; height:30px; display:flex; justify-content:center; align-items:center; font-size:13px; color:rgba(0,0,0,0.8); font-weight:400;}
.reviews_content_link{font-size:13px; font-weight:400;color:var(--main_color);}
.reviews_content_stars_container{width:100%; height:30px; margin:15px 0px; display:flex; justify-content:center; align-items:center;}
.fa-star{font-size:15px; color:#1B1B1B; margin:0px 1px;}
.fa-quote-left{font-size:13px; color:rgba(0,0,0,0.5); position:absolute; top:-25px; left:-15px;}
.fa-quote-right{font-size:13px; color:rgba(0,0,0,0.5); position:absolute; bottom:-25px; right:-15px;}
.squared_contents_container{width:100%; height:auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;}
.squared_content_container{width:32%; height:auto; display:flex; align-self:flex-start; flex-direction:column; margin:25px 0px;}
.squared_content_image_container{width:100%; height:260px; overflow:hidden;}
.squared_content_image{ width:100%; height:100%; background-size:cover; background-position:center; }
.squared_content_texts_container{width:100%; min-height:145px; display:flex; flex-direction:column; padding:15px 0px; position:relative;}
.squared_content_texts_title{ width:100%; font-weight:400; font-size:16px; color:var(--main_color); margin-bottom:10px;}
.squared_content_texts_description{width:100%; height:auto; font-weight:400; overflow:hidden; font-size:15px; color:rgba(0, 0, 0, 0.9); margin-bottom:10px;}
.squared_content_texts_link{ font-size:15px; color:var(--main_color); align-self:flex-end; font-weight:400; text-align:right; margin-top:auto;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="reviews_contents_container mover_container_400 mover_on" style="">
<a href="" class="reviews_content_container mover_left" style="">
<div class="reviews_content_dot_top" style=""></div>
<div class="reviews_content_dot_left" style=""></div>
<div class="reviews_content_dot_right" style=" "></div>
<p class="reviews_content_paragraph" style=" ">
<i class="fa fa-quote-left" style=""></i>
<i class="fa fa-quote-right" style=""></i>
We have an 18 month old Boxer dog who was absolutely unruly. We had sent him to training at another dog training centre and he actually came back after a week of being away worse than when he left.
</p>
<span class="reviews_content_author" style="">Simon Pegg - <span class="reviews_content_link" style="">Trivago.com</span></span>
<div class="reviews_content_stars_container" style="">
<i class="fa fa-star" style=""></i>
<i class="fa fa-star" style=""></i>
<i class="fa fa-star" style=""></i>
<i class="fa fa-star" style=""></i>
<i class="fa fa-star" style=""></i>
</div>
</a>
<a href="" class="reviews_content_container mover_middle" style="">
<div class="reviews_content_dot_top" style=""></div>
<div class="reviews_content_dot_left" style=""></div>
<div class="reviews_content_dot_right" style=" "></div>
<p class="reviews_content_paragraph" style=" ">
<i class="fa fa-quote-left" style=""></i>
<i class="fa fa-quote-right" style=""></i>
We have an 18 month old Boxer dog who was absolutely unruly. We had sent him to training at another dog training centre and he actually came back after a week of being away worse than when he left.
</p>
<span class="reviews_content_author" style="">Simon Pegg - <span class="reviews_content_link" style="">Trivago.com</span></span>
<div class="reviews_content_stars_container" style="">
<i class="fa fa-star" style=""></i>
<i class="fa fa-star" style=""></i>
<i class="fa fa-star" style=""></i>
<i class="fa fa-star" style=""></i>
<i class="fa fa-star" style=""></i>
</div>
</a>
<a href="" class="reviews_content_container mover_right" style="">
<div class="reviews_content_dot_top" style=""></div>
<div class="reviews_content_dot_left" style=""></div>
<div class="reviews_content_dot_right" style=" "></div>
<p class="reviews_content_paragraph" style=" ">
<i class="fa fa-quote-left" style=""></i>
<i class="fa fa-quote-right" style=""></i>
We have an 18 month old Boxer dog who was absolutely unruly. We had sent him to training at another dog training centre and he actually came back after a week of being away worse than when he left.
</p>
<span class="reviews_content_author" style="">Simon Pegg - <span class="reviews_content_link" style="">Trivago.com</span></span>
<div class="reviews_content_stars_container" style="">
<i class="fa fa-star" style=""></i>
<i class="fa fa-star" style=""></i>
<i class="fa fa-star" style=""></i>
<i class="fa fa-star" style=""></i>
<i class="fa fa-star" style=""></i>
</div>
</a>
</div>
<div class="squared_contents_container mover_container_500 mover_on" style="">
<div class="squared_content_container mover_left" style="">
<a href="" class="squared_content_image_container" style="">
<div class="squared_content_image zoom_in" style="background-image:url('img/dogs20.jpg');"></div>
</a>
<div class="squared_content_texts_container" style=" ">
<span class="squared_content_texts_title" style="">Clases personalizadas</span>
<span class="squared_content_texts_description" style="">One common dog fear is that of men — but is it normal and can it be fixed? We look at the causes and solutions for when Man’s Best Friend doesn’t live up to...</span>
<a href="" class="squared_content_texts_link" style="">Leer más</a>
</div>
</div>
<div class="squared_content_container mover_middle" style="">
<a href="" class="squared_content_image_container" style="">
<div class="squared_content_image zoom_in" style="background-image:url('img/dogs20.jpg');"></div>
</a>
<div class="squared_content_texts_container" style=" ">
<span class="squared_content_texts_title" style="">Clases personalizadas</span>
<span class="squared_content_texts_description" style="">One common dog fear is that of men — but is it normal and can it be fixed? We look at the causes and solutions for when Man’s Best Friend doesn’t live up to...</span>
<a href="" class="squared_content_texts_link" style="">Leer más</a>
</div>
</div>
<div class="squared_content_container mover_right" style="">
<a href="" class="squared_content_image_container" style="">
<div class="squared_content_image zoom_in" style="background-image:url('img/dogs20.jpg');"></div>
</a>
<div class="squared_content_texts_container" style=" ">
<span class="squared_content_texts_title" style="">Clases personalizadas</span>
<span class="squared_content_texts_description" style="">One common dog fear is that of men — but is it normal and can it be fixed? We look at the causes and solutions for when Man’s Best Friend doesn’t live up to...</span>
<a href="" class="squared_content_texts_link" style="">Leer más</a>
</div>
</div>
</div>