jQuery повторные эффекты наведения

Question

У меня есть эта странная проблема, когда я наматываю мышь на каждую из ссылок в коде ниже пару раз, эта ссылка будет продолжать эффект зависания слишком долго и повторно применить ее. У меня есть так, что jquery изменяет свой класс, когда они зависнут, так что он выделяет ту, над которой находится мышь.

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

Это код JQuery:

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

И классы CSS просто содержат различный цвет фона.

Воспользуйтесь ссылкой ниже, чтобы увидеть, что я имею в виду, я не знаю, как описать поведение. Паря на пару раз, просто двигайте мышью туда и обратно по каждой из ссылок пару раз. http://74.63.212.104/nav/

Answer 1

Реализация jQuery .stop() перед началом анимации очищает все, что осталось в очереди анимации для этого элемента.

$(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:

Объяснение .stop() параметры

.stop([clearQueue] [, jumpToEnd])

clearQueue - логическое значение, указывающее, следует ли удалить анимацию в очереди, а также. По умолчанию false.

jumpToEnd - Логическое значение, указывающее, следует ли немедленно завершить текущую анимацию. По умолчанию false.