how can i use position bottom to animate a div to the top of page
<p>I currently am trying to animate the position of a div in a 3 tier structure, the first tier shows only the header, the second the header and excerpt and then the 3rd some additional copy. At the moment I can animate position bottom for both tier 1 and tier 2 but cant seem to figure out how I animate the tier 3 to what would ideally be top:0 which I dont think I can do. Can anyone offer any advice on how this can be achieved?</p>

<p>JS</p>

<pre><code>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();
});
</code></pre>

<p>Link to current build: <a href="http://bit.ly/IA65Mb" rel="nofollow">http://bit.ly/IA65Mb</a></p>

<p>Kyle</p>
