jQuery addClass zu sichtbaren Elementen mit Verzögerung

Question

Ich möchte eine Klasse zu jedem Element hinzufügen, das sich gerade im Fenster befindet, mit einer Verzögerung zwischen einem Domino-Effekt.

Was ich habe, macht die Verzögerung gut, aber fügt die Klasse allen übereinstimmenden Elementen hinzu und nicht nur den in Sicht.

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

Sie möchten nicht auf die scrollTop der Box überprüfen. Sie wollen für die offset().top

Überprüfung werden diese Arbeiten sollten:

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