Why is my jQuery .mouseleave animation not working?
<p>So, I'm fairly new to jQuery.. I'm working on a website, working with <code>Twitter Bootstrap</code>. Now I want my menu buttons to sort of pop out when you .<code>mouseenter</code>. This works. However I want in to go back to it's original state when .<code>mouseleave</code>. Can anyone help?</p>

<pre><code>$('.nav-pills li a').not('.nav-pills .active a').mouseenter(function(){
    console.log('enter');
    $(this).animate({
        height: '+=5px',
        opacity: '1'
    }, 300);
});
$('.nav-pills li a').not('.nav-pills .active a').mouseleave(function(){
    console.log('leave');
    $(this).animate({
        height: '-=5px',
        opacity: '0.5'
    }, 300);
});
</code></pre>

<p>EDIT: Sorry 'bout that.. HTML down here:</p>

<pre><code>&lt;div class="container" id="menu"&gt;
    &lt;div class="tabbable fixed-top"&gt;
            &lt;ul class="nav nav-pills"&gt;
                &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Restaurant&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Hotel&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Feesten &amp; vergaderen&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Nieuwsbrief &amp; activiteiten&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Omgeving &amp; links&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Revieuws / Gastenboek&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
