javascript - 如何延迟每个元素的 jQuery Waypoint 以产生惊人的效果？

Question

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

Fiddle 1

$(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);


  });

});

比起我尝试在航路点内添加延迟，但最后的元素延迟更长，因为它们不在 View 中

$(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

为了在不知道会看到多少元素并尝试执行其他答案和评论中描述的所有杂技的情况下创建这种交错效果，您可以改为使用航路点来提供队列并处理该队列中的元素你的交错间隔。这在一般情况下是正确的，不仅适用于动画，也不仅仅适用于 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