jQuery addClass延迟到可见元素

Question

我想为当前在窗口中的每个元素添加一个类，并在多米诺效应之间延迟。

我已经做了延迟很好，但增加了类到所有匹配的元素，而不仅仅是在视图中。

$(document).ready(function() { 
    $('.box').each(function(i){ 
    if($(this).scrollTop() <= $(window).scrollTop() + $(window).height()) { 
     var tile = $(this); 
     setTimeout(function() { 
     tile.addClass('visible'); 
     }, 500*i); 
    }; 
    }); 
}); 

Answer 1

您不希望检查箱子的scrollTop。你想被检查为offset().top

这应该工作：

$(document).ready(function() { 
    $('.box').each(function(i){ 
    if($(this).offset().top <= $(window).scrollTop() + $(window).height()) { 
     var tile = $(this); 
     setTimeout(function() { 
     tile.addClass('visible'); 
     }, 500*i); 
    }; 
    }); 
});