jquery - 要素をアニメーション化し、スクロールして幅と高さを大きくする

Question

ページをスクロールすると、ページのタイトル (クラス タイトル) が画面上部のバー (クラス scrollToTop) に平らに表示されるようにしたいと考えています。現在、タイトルを渡すとバー (背景色のテキストなしのリンク) が表示されるコードを使用していますが、タイトルをスクロールするとゆっくりと表示されるようにしたいと考えています。明確にするために、タイトルが画面の上部に達したときに (タイトルの幅と最小の高さで) 表示を開始し、タイトルが完全に画面外になると (最終的な高さと 100% の幅で) 表示を終了します。また、上にスクロールするときに逆にしたいと思います。

これが私のコードです：

<a href="#top" class="scrollToTop"></a>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            var startY = $('.title').position().top + $('.title').outerHeight();
            $(window).scroll(function(){
                checkY();
            });

            function checkY(){
                if( $(window).scrollTop() > startY ){
                    $('.scrollToTop').slideDown();
                }else{
                    $('.scrollToTop').slideUp();
                }
            }
            checkY();
        });
    </script>

ありがとうございます。さらに情報が必要な場合はお知らせください。