Анимация элемента с использованием jQuery и вызова stop()

Question

В моей навигации у меня есть элементы, которые становятся выше, когда мышь нависает над ними. При быстром перемещении мыши в и из элемента это вызывает проблемы. Я обыскал в Интернете и нашел кое-что из решения, метод jQuery stop. Я пробовал это, но не работал.

Когда вы медленно перемещаете указатель мыши на элемент li, он отлично работает (анимация доходит до финского), но когда вы двигаете мышью быстрее, он терпит неудачу.

Here's the codes and the result.

Что может быть не так?

А что, если я хочу сохранить текст 10 пикселей снизу? Как это реализовать?

Answer 1

stop принять два аргумента.

• логическое значение, указывающее, следует ли удалить очередями анимацию

• логическое значение, указывающее, следует ли завершить текущую анимацию сразу

Вам нужно добавить эти 2 аргументы, чтобы сделать его работу, как и ожидалось :

$(element).stop(true, true).animate({..... 

Updated Demo

Answer 2

Вы можете использовать jQuery hoverintent plugin.

$("nav").hoverIntent(makeTall, makeShort, 'li') 

Где makeTall и makeShort ваши функции для обработки в CSS.