Powtórzone efekty jQuery - jquery

Mam ten dziwny problem za każdym razem, gdy rzucammyszką nad każdym z linków w kodzie poniżej kilka razy, link będzie nadal utrzymywał efekt zawisu zbyt długo i wielokrotnie go stosować. Mam to tak, że jquery zmienia swoją klasę, gdy są one podskakujące tak, że podświetlają to, co mysz skończyła.

<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>

To jest kod jquery:

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

A klasy css po prostu zawierają inny kolor tła.

Wypróbuj poniższy link, aby zobaczyć, co mam na myśli, nie wiem, jak opisać zachowanie. Po najechaniu kursorem kilka razy, po prostu przesuwaj myszką tam iz powrotem po każdym z linków kilka razy. http://74.63.212.104/nav/

Odpowiedzi:

Wdrażanie jQuery .stop() przed rozpoczęciem animacji usuwa wszystko, co pozostało w kolejce animacji dla tego elementu.

$(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);
});
});

EDYTOWAĆ:

Wyjaśnienie .stop() parametry

.stop( [clearQueue] [, jumpToEnd] )

clearQueue - Wartość logiczna wskazująca, czy usunąć animację w kolejce. Domyślnie false.

jumpToEnd - Wartość logiczna wskazująca, czy natychmiast zakończyć aktualną animację. Domyślnie false.