0

Добрый день! На странице есть много блоков с классом .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>

0

1 ответ 1

2

Например применить each:

       $(function() {
         var person = $('.person');
         person.css({
           'margin-left': '300px'
         });
         
         $(window).on('scroll', function(e) {
           var h = ($(window).height() - person.height()) / 2;
           
			$('.person').each(function(){
              if ($(window).scrollTop() + $(this).height() > $(this).offset().top) {
             $(this).css({
               'margin-left': '10px'
             });
            } else {
		      $(this).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>

1
  • Даже и не знаю.
    – SVE
    23 сен 2016 в 11:06

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.