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; position: relative; }
#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);

$(window).scroll(function(d,h) {
    tiles.each(function(i) {
        a = $(this).offset().top + $(this).height();
        b = $(window).scrollTop() + $(window).height();
        var that = $(this);
        if (a < b && true != $(this).data('faded')) {
            $(this).data('faded', true).fadeTo(500,1, function() {
                that.find('div').animate({left: '+=300', top: '+=12'}, 4500);
            });
        }
    });
});