Sequentially fade in divs when in viewport
<p>I'm working on making a group of <code>div</code>'s fade in sequentially when they come into view on screen. However, I'm still having some trouble getting it to work.</p>

<p>I have about 5 <code>div</code>'s with the class <code>hideme</code> that I want to fade in slowly once they come into view. </p>

<p>The HTML for these <code>div</code>'s is quite simple:</p>

<pre><code>&lt;div class="hideme"&gt;
    &lt;h3 class="text-white"&gt;one&lt;/h3&gt;
    &lt;img src="../link-to-image.jpg"&gt;
    &lt;p&gt;Some text that goes here!&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>So far, I have this as my jQuery, but I'm not sure where it's gone wrong, i think there might be a few syntax errors in there.</p>

<pre><code>var divs = $('.hideme');

$(window).on('scroll', function() {

    $.each(divs, function(i, item) {

        if($(item).offset().top &lt;= $(window).scrollTop();) {
            setTimeout(function() {
            $(item).css('opacity', '1');
        }, 1000 * i);
        }

    });

});
</code></pre>
