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

为了创建这种交错效果而不知道将有多少项目在视图中并尝试执行其他答案和注释中描述的所有杂技，您可以改为使用航点来提供队列并处理该队列中的项目你的交错间隔。这通常是正确的，不仅仅是动画，也不仅仅是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

Answer 2

你所拥有的第二个小提琴将起作用但是你必须考虑一些因素：

浏览器加载后会立即看到多少项？这些项目需要相隔200毫秒的延迟（例如200,400,600,800）。
只有在滚动时才能看到的任何其他项目需要在滚动延迟方面以200ms开始。以你的jsfiddle为例，当你滚动2个新项目时，一次触发Waypoints。这些将需要再次相隔200毫秒（200,400,200,400等）。换句话说，每个'row'需要以200ms开始并递增200，直到它到达行的末尾。
```
[0-7][0-7][0-7]
```

See this adaptation of your second fiddle

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

2 个答案: