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="imagem">Fade In</div>
    <div class="imagem">Fade In</div>
    <div class="imagem">Fade In</div>
    <div class="imagem">Fade In</div>
    <div class="imagem">Fade In</div>

    
</div>

CSS

#container
{
    height:2000px;    
}

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

.imagem
{
    opacity:0;
}

JavaScript

$(window).scroll(function () {
    
            /* checar a localização dos elementos */
            $('.imagem').each(function (i) {
    
                var bottom_of_object = $(this).position().top + $(this).outerHeight()+100;
                var bottom_of_window = $(window).scrollTop() + $(window).height();
    
                /* se o objeto estiver completamente "scrollado" pra dentro da janela, fazer o fade_in*/
                if (bottom_of_window > bottom_of_object) {
    
                    $(this).animate({
                        'opacity': '1'
                    }, 500);
    
                }
                
                else {
                     $(this).animate({
                        'opacity': '0'
                    }, 500);
                }
    
            });
    
        });