Я создал элемент h1, который добавляет к нему класс и удаляет его с длительностью 300 мс, когда мышь наводится и выключает его, содержащий DIV #logo с использованием jQuery ..hover() метод в сочетании с jQuery UI .addClass() и .removeClass() методов.
Он работает великолепно, но только когда пользователь наводит курсор на #logo и перестает ждать, пока метод .addClass () завершит добавление нового класса в h1, что занимает всего 300 миллисекунд.Однако, если пользователь отключается от #logo DIV до того, как истечет 300 миллисекунд метода .addClass(), методы jQuery .addClass() или .removeClass() будут парализованы.Попытка переместить курсор обратно в #logo больше не влияет на h1.Он заблокирован на месте, пока браузер не обновится.Недопустимо.
Вы можете посмотреть и опробовать мой пример на JS Bin здесь *.
Попробуйте медленно навести курсор на поле #logo DIV в центре экрана, знаете, дождитесь завершения анимации.Затем переместите курсор от него.Все хорошо.Теперь попробуйте быстро навести курсор на #logo DIV, и вы увидите, что он заблокирован.
Какие изменения кода мне нужно сделать, чтобы этот jQuery не блокировался?
РЕДАКТИРОВАТЬ: @pointy указал мне правильное направление.Я получил его, чтобы остановить блокировку, применяя .stop(true,true) перед .addClass('hover',300), а также применяя его до .removeClass('hover',300)