Анимация динамически загружаемых элементов с помощью jquery.inview с использованием делегирования jquery. - PullRequest
Новая
       33

Анимация динамически загружаемых элементов с помощью jquery.inview с использованием делегирования jquery.

0 голосов
/ 23 февраля 2019

У меня есть список элементов фотографии, всплывающих вверх, когда отображается строка.Плагин jquery.inview хорошо поработал.Есть кнопка «Загрузить больше», по которой пользователь нажимает, чтобы загрузить больше строк фотографий.Они получают назначенное делегату событие "inview" через родительский элемент сетки.Единственная проблема заключается в том, что теперь, когда вы прокручиваете, все элементы плавают вверх одновременно, и нет хорошего перехода вверх.jquery делегировал «inview», но он не улавливает идею отдельно плавающих дочерних элементов.Как я могу исправить это, чтобы перемещать по одной строке за раз как 1-ю партию? 

$('#grid .item').one('inview', function (event, isInView) {
    if (isInView) {
      $(this).addClass('positioned');
    }
});


var pagenumber = 0;
function LoadMorePhotos(query) {
    $('.grid-more-button').click(function (evt) {
      LoadAJAX(modid, ++pagenumber, query, function (data) {
        $('#grid').append(data.data);
        $('#grid-more-button').removeClass('disabled');
      }, function (data) {
        $('#grid-more-button').hide();
      });
    return false;
  });
}

$(document).ready(function () {
  LoadMorePhotos('?ctg=photo');
  $('#grid').on('inview', '.item:not(.positioned')', function (event, isInView) {
    if (isInView && !$(this).hasClass('positioned')) {
      $(this).addClass('positioned');
      $(this).off();
    }
  });
});
#grid {
  display: block;
  width: 100%;
}

#grid .item {
  display: block;
  background-color: #000;
  min-height: 50px;
  color: #fff;
  opacity: 0;
}

#grid-button-more {
  display: inline-block;
  border: 2px;
  padding: 20px 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inview/1.0.0/jquery.inview.min.js"></script>
<div id="grid">
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
</div>
<div id="grid-more-button">Load More</div>
...