特定のクラスやセレクタの位置でアニメーションするpeekaboo.jsの使い方

備忘録程度にまとめますので、何かの参考になればうれしいです。
そもそもpeekaboo.jsって何やねん！ってなりますが、
ページ内の特定の位置までスクロールするとアニメーションだったり
何らかの処理をJQueryに処理させる便利なライブラリです。

口だと伝わりにくいので、例えばこんなサイトを制作したい場合とかには特に便利
http://www.ooedoonsen.jp/onsengenki/index.html

ランディングページとか、下部に設置するお問合せとかを少し動作させると
すごくインパクトが出ると思います。
もちろんJQueryの機能でもできるんですけど、動きもスムーズだしコードもコンパクトでいい！
なので何かしら重宝してます。

早速使い方ですが、以下からpeekaboo.js本体をDLします
https://github.com/uniba/jquery-peekaboo

使いたいページでJQuery本体とpeekaboo.jsを読み込みます

<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery-peekaboo.js"></script>

後はここで動作させたいと思うところで処理を記述します

$(function(){
    $('クラスまたはID').peekaboo().on('appear',function(){
        $(this).css({CSS:'処理前の値'}).stop().animate({CSS:'処理後の値'},実行速度);
    });
});

具象的に書くとこんな感じ

$(function(){
    $left_image.peekaboo().on('appear',function(){
        $(this).css({opacity:'0'}).stop().animate({opacity:'1'},1500);
    });
});

フェードインアウトってすごく気持ちがいいですね！
ただ、ここが一番重要！
opacityですが、IE8以下はopacityをサポートしておりません！
ですので、cssにopacityを指定してブラウザを起動させるとレイアウト崩れをおこし
それだけで大変になってしまいます。

その際はJQueryでCSSの初期値を入れてあげてください

$(function(){
    $('.left_image').css("opacity","0");
    $left_image.peekaboo().on('appear',function(){
        $(this).css({opacity:'0'}).stop().animate({opacity:'1'},1500);
    });
});

僕もまだ使い始めですので、もっといい方法とかあれば教えてください！