特定のセレクタ、クラスが来た時にアニメーションさせる〜JQuery本体編〜

備忘録として記載しますので、参考程度に見てください。
参考にしたのは以下のブログ。非常にわかりやすく記述されていました
http://weboook.blog22.fc2.com/blog-entry-385.html

ここから少し自分なりにカスタマイズ
至ってシンプル!
とりあえずJQueryを読み込んで

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>


あとはJQueryで動かしたいセレクタ、またはクラスが来た時の処理を記述するだけ

$(function(){
    $(window).scroll(function (){
        $('セレクタ名またはクラス名').each(function(){
            var point = $(this).offset().top;   
            var scroll = $(window).scrollTop();
            var windowHeight = $(window).height();
            if (scroll > point - windowHeight + 200){
                $(this).animate({"top": "600px"}, 1000);
            }
        });
    });
});

CSSで初期値というか動かしたい要素を最初どこに配置するのか、その辺もしっかり計算して
最初にCSSで制御する必要あり!