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

Question

У меня есть список элементов фотографии, плавающих вверх, когда видна строка. Плагин 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>