divをページ上部にアニメーション表示するにはどうすればいいですか

Question

現在、3層構造のdivの位置をアニメートしようとしています。最初の層はヘッダーのみを表示し、2番目はヘッダーと抜粋を表示し、 3番目の追加コピー。現時点では、ティア1とティア2の両方でポジションボトムをアニメートできますが、ティア3を理想的にはトップになるようにアニメーション化する方法はわかりません：0私はできないと思います。誰がこれを達成する方法についてアドバイスを提供することができますか？

JS

more.on('click', function(e){ 

    if(body.hasClass('tier1')){ 
    body.removeClass('tier1').addClass('tier2'); 
    wrapper.delay(500).animate({ bottom: wrapper.data('tier2') }, 400, function(){ 
     //show close 
     close.show(); 
    }); 

    } else if (body.hasClass('tier2')){ 
    body.removeClass('tier2').addClass('tier3'); 
    wrapper.delay(1500).animate({ bottom: '300' }, 500, function(){ // show be top of window 
     // hide read more 
     more.hide(); 

     // hide .excerpt + show .upper 
     excerpt.fadeOut(function(){ 
     upper.fadeIn(); 
     }); 
    }); 
    } 

    e.preventDefault(); 
}); 

現在のビルドへのリンク：http://bit.ly/IA65Mb

カイル

Answer 1

チェックこのhttp://jsfiddle.net/d3eLE/6/ HTML

<div id="wrap"> 
     <a id="me">Click me</a> 
</div> 

CSS

#wrap { 
    position: absolute; 
    bottom: 0; 
    width: 400px; 
    height: 50px; 
    background: #ff0; 
} 

#me { 
    border: 1px #000 solid; 
    background: #0f0; 
} 

jQueryが

$("#me").click(function(){ 
    $("#wrap").animate({ 
     bottom: ($(window).height() - $("#wrap").height()) 
    }, 2000); 

}); 

代わりに下を使用して、あなたはトップを使用することができます。

$("#wrap").removeAttr("bottom").animate({ 
    top: 0 
}, 2000);