Animated <a href breaks linking?
<p>I'm doing a Animation for one menu like that below:</p>

<pre><code>&lt;div id="menu"&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;Menu_1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Menu_2&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Menu_3&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Menu_4&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Menu_5&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Menu_6&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>The links are working, but not during the animation, they stop and return when the animation is over, but sometimes it is Uncomfortable. Take a look at the Animation:</p>

<pre><code>$('#menu &gt; ul &gt; li').hover(

function() {
    $(this).children().transition({
        perspective: '120px',
        rotateY: '90deg'
    }, 140).transition({
        color: '#FFF',
        background: '#f15a25',
        rotateY: '270deg'
    }, 0).transition({
        perspective: '120px',
        rotateY: '360deg'
    }, 140);
}, function() {
    $(this).children().transition({
        perspective: '120px',
        rotateY: '270deg'
    }, 140).transition({
        color: '#353535',
        background: 'url(&lt;?php bloginfo( 'template_directory' ); ?&gt;/images/bullets.png) no-repeat',
        backgroundPosition: '3px 18px',
        rotateY: '90deg'
    }, 0).transition({
        perspective: '120px',
        rotateY: '0deg'
    }, 140);
});​
</code></pre>

<p>Isn't there a way to avoid that breaking of linking?
Thanks a lot in advance!</p>
