Элементы веб-страницы, которые появляются или исчезают при наведении, почти всегда должны делать это с небольшой задержкой. Почему?
- Чтобы предотвратить выпрыгивание отвлекающих элементов, пока ваша мышь просто перемещается по странице.
- Чтобы вы случайно не щелкнули что-то, что появилось в поле зрения, когда вы двигали курсор к цели.
- Чтобы предотвратить неожиданное исчезновение элементов, таких как меню, когда вы просто отклоняетесь от пикселя, заставляя вас повторно вызывать их.
Создание небольшой задержки (скажем, 100 мс) перед появлением или исчезновением элементов является отличительной чертой вежливых пользовательских интерфейсов, но, к сожалению, редко. Если вы выполните поиск в Google плагинов JavaScript для меню, выпадающих списков и т. д., вы не найдете почти ни одного из них. Это также самая большая проблема, с которой я сталкиваюсь при использовании CSS :hover для отображения или скрытия элементов (и почему я думаю, что выпадающие меню на чистом CSS бесполезны).
Почти во всех проектах с интерактивными элементами JavaScript, над которыми я работал в прошлом, я указывал это поведение, что значительно усложняло работу разработчика. В большинстве случаев они разрабатывали свое решение с нуля.
Поэтому я был очень рад обнаружить плагин hoverIntent jQuery Брайана Черна, легкий (4 КБ неминифицированный) скрипт, который позволяет легко сделать это:
HoverIntent аналогичен наведению курсора в jQuery. Однако вместо того, чтобы немедленно вызывать функции onMouseOver и onMouseOut, этот подключаемый модуль отслеживает движение мыши пользователя onMouseOver и ждет, пока она замедлится, прежде чем вызывать функцию onMouseOver… и вызовет функцию onMouseOut только после вызова onMouseOver.
Пожалуйста, рассмотрите возможность использования его в вашем следующем проекте!
[Впервые опубликовано: август 2012 г. в блоге Isotoma.]
