Как задержать путевую точку jQuery для каждого элемента, чтобы создать потрясающий эффект?

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


    }); 

}); 

Чем я пытался добавить задержки внутри Точку но последние элементы получить более длительные задержки, так как они не являются в представлении

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

Чтобы создать этот эффект в шахматном порядке, не зная, сколько предметов будет отображаться, и попытаться выполнить все акробатики, описанные в других ответах и ​​комментариях, вместо этого вы можете использовать путевую точку для подачи очереди и обработки элементов в этой очереди с интервалом в шахматном порядке. Это справедливо в целом, а не только для анимации, а не только для путевых точек.

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

Вторая скрипка вы должны работать, но вы должны принять несколько вещей во внимание:

1. Сколько элементов сразу будет видно, когда браузер загружает? Эти предметы должны иметь задержки, которые находятся на расстоянии 200 м (например, 200, 400, 600, 800).

2. Любые дополнительные предметы, которые будут видны только при прокрутке, должны будут вернуться к 200 мс с точки зрения задержки прокрутки. Возьмите, например, ваш jsfiddle, когда вы прокручиваете 2 новых пункта. Точки маршрута запускаются одновременно. Они должны будут снова разделиться на 200 м (200, 400, 200, 400 и т. Д.). Другими словами, каждая строка должна начинаться с 200 мс и увеличиваться на 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.