如何为每个项目延迟 jQuery Waypoint 以产生惊人的效果？

Question

我正在尝试将下一个项目的航路点延迟 0.2 秒。我尝试设置超时，但是当前几个项目加载时超时已经过期。

$(function() {

  $(".item").each(function(index, element) {
    var $this = $(this);

    var $delay = $(this).data('delay');
    setTimeout(function() {

      $this.waypoint(function() {

        $(this.element).addClass('show');

      }, {
        offset: '90%',
      });

    }, $delay);


  });

});

我尝试在航路点内添加延迟，但最后的项目延迟更长，因为它们不在视图中

$(function() {

  $(".item").each(function(index, el) {

    new Waypoint({
      element: el,
      handler: function() {
        var element = $(this.element),
          delay = element.attr('data-delay');
        setTimeout(function() {
          element.addClass('show');
        }, delay);
        this.destroy();
      },
      offset: '90%'
    });

  });

});

Fiddle 2

感谢任何帮助。

Answer 1

您拥有的第二个 fiddle 可以使用，但您必须考虑以下几点：

有多少项目在浏览器加载时立即可见？这些项目需要有相隔 200 毫秒的延迟（例如 200、400、600、800）。

任何仅在滚动时可见的附加项目需要在滚动延迟 200 毫秒后重新开始。以您的 jsfiddle 为例，当您滚动浏览 2 个新项目时 Waypoints 一次被触发。这些将需要再次相隔 200 毫秒（200、400、200、400 等）。换句话说，每个 'row' 需要从 200ms 开始并递增 200，直到到达行尾。

<div id="container">
  <div class="item" data-delay="200">
    <div class="item-in"></div>
  </div>
  <div class="item" data-delay="400">
    <div class="item-in"></div>
  </div>
  <div class="item" data-delay="600">
    <div class="item-in"></div>
  </div>
  <div class="item" data-delay="800">
    <div class="item-in"></div>
  </div>
  <div class="item" data-delay="200">
    <div class="item-in"></div>
  </div>
  <div class="item" data-delay="400">
    <div class="item-in"></div>
  </div>
  <div class="item" data-delay="200">
    <div class="item-in"></div>
  </div>
  <div class="item" data-delay="400">
    <div class="item-in"></div>
  </div>
</div>

See this adaptation of your second fiddle.

Answer 2

为了在不知道有多少项目在视图中并尝试执行其他答案和评论中描述的所有杂技的情况下创建这种交错效果，您可以改为使用航路点来填充队列并处理其中的项目以您交错的间隔排队。这在一般情况下是正确的，不仅仅是动画，也不仅仅是 Waypoints.

$(function() {
  var itemQueue = []
  var delay = 200
  var queueTimer

  function processItemQueue () {
    if (queueTimer) return // We're already processing the queue
    queueTimer = window.setInterval(function () {
      if (itemQueue.length) {
        $(itemQueue.shift()).addClass('show');
        processItemQueue()
      } else {
        window.clearInterval(queueTimer)
        queueTimer = null
      }
    }, delay)
  }

  $(".item").waypoint(function () {
    itemQueue.push(this.element)
    processItemQueue()
  }, {
    offset: '90%'
  })
})

Fiddle

如何为每个项目延迟 jQuery Waypoint 以产生惊人的效果？

How to delay jQuery Waypoint for each item in order to create staggering effect?

javascript

css

jquery

jquery-waypoints