Добрый день! На странице есть много блоков с классом .person. И при прокрутке страницы, как только в видимую часть экрана попадает первый блок с этим классом, то скрипт меняет свойство сразу для всех блоков с классом .person. А как можно сделать, чтобы скрипт поочередно менял свойство для каждого блока, как только тот попадал в видимую часть экрана?
$(function() {
var person = $('.person');
person.css({
'margin-left': '300px'
});
$(window).on('scroll', function(e) {
var h = ($(window).height() - person.height()) / 2;
if ($(window).scrollTop() + $('.person').height() > $('.person').offset().top) {
$('.person').css({
'margin-left': '10px'
});
}
else {
$('.person').css({
'margin-left': '300px'
});
}
});
});
.person {
margin-left: 10px;
transition: margin-left .4s;
}
p {
height: 700px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p></p>
<div class="person"><img alt="" src="https://i02.fotocdn.net/s16/240/gallery_xs/254/54328815.jpg"></div>
<p></p>
<div class="person"><img alt="" src="https://i02.fotocdn.net/s16/240/gallery_xs/254/54328815.jpg"></div>
<p></p>
<div class="person"><img alt="" src="https://i02.fotocdn.net/s16/240/gallery_xs/254/54328815.jpg"></div>
<p></p>