JQuery fade in a div when user scroll to that div.

http://stackoverflow.com/questions/5367731

HTML

Scroll to see animation, hurry or you'll miss it.
<ul id="tiles">
    <li><div id="scrollMe1"></div></li>
    <li><div id="scrollMe2"></div></li>
    <li><div id="scrollMe3"></div></li>
    <li><div id="scrollMe4"></div></li>
    <li><div id="scrollMe5"></div></li>
</ul>

CSS

ul#tiles { margin:50em 0; }
ul#tiles li { width:400px; height:200px; margin:20em auto; background:#333; }
#scrollMe1 { background:pink; width:50px;height:50px; position:absolute; overflow:hidden;}
#scrollMe2 { background:yellow; width:50px;height:50px; position:absolute; overflow:hidden;}
#scrollMe3 { background:red; width:50px;height:50px; position:absolute; overflow:hidden;}
#scrollMe4 { background:orange; width:50px;height:50px; position:absolute; overflow:hidden;}
#scrollMe5 { background:brown; width:50px;height:50px; position:absolute; overflow:hidden;}

JavaScript

tiles = $("ul#tiles li").fadeTo(0, 0);

    $("#scrollMe1").animate({left: '+=300', top: '+=12'}, 4500);
    $("#scrollMe2").animate({left: '+=300', top: '+=12'}, 3750);
    $("#scrollMe3").animate({left: '+=300', top: '+=16'}, 4000);
    $("#scrollMe4").animate({left: '+=300', top: '+=16'}, 4000);
    $("#scrollMe5").animate({left: '+=300', top: '+=16'}, 4000);

$(window).scroll(function(d,h) {
    tiles.each(function(i) {
        a = $(this).offset().top + $(this).height();
        b = $(window).scrollTop() + $(window).height();
        if (a < b) $(this).fadeTo(500,1);
        
    });
});