FadeIn on Scroll (jQuery)

Used to answer a question on StackOverflow.

HTML

<div id="container">
    
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div class="hideme">Fade In</div>
    <div class="hideme">Fade In</div>
    <div class="hideme">Fade In</div>
    <div class="hideme">Fade In</div>
    <div class="hideme">Fade In</div>
    
</div>

CSS

#container
{
    height:2000px;    
}

#container DIV
{ 
    margin:50px; 
    padding:50px; 
    background-color:lightgreen; 
}

.hideme
{
    opacity:0;
}

JavaScript

$(document).ready(function() {
    
    $(window).on('scroll');
    
    var status = [];
    
    /* Every time the window is scrolled ... */
    $(window).scroll( function(){
    
        /* Check the location of each desired element */
        $('.hideme').each( function(i, el){
            
            if (status[i] !== 'showing') { // Makes sure that we haven't already done this item
            
                var bottom_of_object = $(this).position().top + $(this).outerHeight();
                var bottom_of_window = $(window).scrollTop() + $(window).height();
                
                /* If the object is completely visible in the window, fade it it */
                if( bottom_of_window > bottom_of_object ){
                    
                    $(this).animate({'opacity':'1'},500);
                    status[i] = 'showing';   
                    
                    if ($('.hideme').index($(this)) + 1 === $('.hideme').length) {
                        // We've shown them all, stop listening for scroll events!!!
                        $(window).off('scroll');
                    }  
                    
                }
                
            }
            
        }); 
    
    });
    
});