jQuery repeated hover effects
<p>I have this weird problem whenever I roll my mouse over each of the links in the code below a couple of times, the link will continue the hovering effect too long, and repeatedly apply it. I have it so that jquery changes their class when they're hovered over so that it highlights the one the mouse is over.</p>

<pre><code>&lt;ul&gt;        
    &lt;li&gt;&lt;a href="#" class="current"&gt;Home&lt;/a&gt;&lt;/li&gt;       
    &lt;li&gt;&lt;a href="#" class="hover"&gt;News&lt;/a&gt;&lt;/li&gt;     
    &lt;li&gt;&lt;a href="#" class="hover"&gt;Media&lt;/a&gt;&lt;/li&gt;    
    &lt;li&gt;&lt;a href="#" class="hover"&gt;About&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>This is the jquery code:</p>

<pre><code>$(document).ready(function() {
    $('.hover').hover(function() {
        $(this).switchClass('hover', 'hover-on', 250);
    }, function() {
        $(this).switchClass('hover-on', 'hover', 250);
    });
})
</code></pre>

<p>And the css classes simply contain a different background color.</p>

<p>Try the link below to see what I mean, I don't know how to describe the behavior. By hovering over a couple of times, just move your mouse back and forth over each of the links a couple times.
<a href="http://74.63.212.104/nav/" rel="nofollow">http://74.63.212.104/nav/</a></p>
