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

Question

我试图将每个下一个项目的航点延迟0.2秒.我尝试了设置超时,但是当前几个项加载超时时已经过期.

小提琴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);


  });

});

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

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

  });

});

小提琴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%'
  })
})

小提琴