Question

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.

<ul>        
    <li><a href="#" class="current">Home</a></li>       
    <li><a href="#" class="hover">News</a></li>     
    <li><a href="#" class="hover">Media</a></li>    
    <li><a href="#" class="hover">About</a></li>
</ul>

This is the jquery code:

$(document).ready(function() {
    $('.hover').hover(function() {
        $(this).switchClass('hover', 'hover-on', 250);
    }, function() {
        $(this).switchClass('hover-on', 'hover', 250);
    });
})

And the css classes simply contain a different background color.

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.
http://74.63.212.104/nav/

Answer 1

Implementing a jQuery .stop() before starting the animation clears out anything left in the animation queue for that element.

$(document).ready(function() {
    $('.hover').hover(function() {
        $(this).stop(true, false).switchClass('hover', 'hover-on', 250);
    }, function() {
        $(this).stop(true, false).switchClass('hover-on', 'hover', 250);
    });
});

EDIT:

Explanation of .stop() parameters

.stop( [clearQueue] [, jumpToEnd] )

clearQueue – A Boolean indicating whether to remove queued animation as well. Defaults to false.

jumpToEnd – A Boolean indicating whether to complete the current animation immediately. Defaults to false.