jQuery - Animation when page changes

I have this website: http://www.heinesiebrand.nl/demo/

When the user is on the 'Home'-page, it sees a quote on top of the page. When you go to another page, that disappears. This now happens in a 'har开发者_C百科d' transition, and i want to smooth that up using jQuery.

What I have so far is the following (note: I'm using Wordpress):

<script type="text/javascript">
    <?php if (is_front_page()) { ?> 
             $("#animation").animate({ min-height: "140px" }, 500 );
     <?php } else { ?>
             $("#animation").animate({ min-height: "40px" }, 500 );
     <?php } ?> 
</script> 

And the part to be animated:

<div class="contentwidth-footer" id="animation" style="min-height: 35px;">
    <?php if (is_front_page()) {
        display_tagline($post->ID); 
    } ?>
</div>

This doesn't work, so do you guys have any suggestions? Thanks!

The closest you can come without "ajaxifying" the site is to fade out onunload:

$(window).unload(function() {
  $("#animation").fadeOut();
});

EDIT: Actually, I don't think even that'll do what you want since it's executed after the page unloads -- might depend on the browser.