jQuery - Animation when page changes
<p>I have this website: <a href="http://www.heinesiebrand.nl/demo/" rel="nofollow">http://www.heinesiebrand.nl/demo/</a></p>

<p>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 'hard' transition, and i want to smooth that up using jQuery.</p>

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

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

<p>And the part to be animated:</p>

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

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