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