title: How to delay jQuery Waypoint for each item in order to create staggering effect?
body: <p>I am trying to delay waypoint for every next item by 0.2s. I tried with set timeout but by the time the first few items load the timeout has already expired. </p>
  
  <p><a href="http://jsfiddle.net/bwtq71f8/" rel="nofollow">Fiddle 1</a></p>
  
  <pre><code>$(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);
  
  
    });
  
  });
  </code></pre>
  
  <p>Than I tried adding the delays inside the waypoint but the last items get longer delays since they are not in the view </p>
  
  <pre><code>$(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%'
      });
  
    });
  
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/04pk95q8/1/" rel="nofollow">Fiddle 2</a></p>
  
  <p>any help is appreciated.</p>