Думаю, все кто интересуется web дизайном видели тему для WordPress WP-Coda. Меня прежде всего заинтересовал эффект со всплывающим блоком (появляется над первым пунктом в горизонтальном меню). Эффект очень красивый и мне захотелось сделать всплывающие подсказки в таком же стиле. Как оказалось – ничего сверх сложного . Прежде всего, рассмотрим принцип работы эффекта. При наведении указателя мышки на какой-то элемент страницы плавно появляется блок с текстом. При этом одновременно применяются два эффекта: перемещение и изменение прозрачности. Если переместить мышку на другой элемент страницы – блок плавно исчезает. В оригинальном варианте при наведении мышки на блок с текстом он остается видимым. Но, я решил, что для подсказок такое поведение не самое удачное, т. к. под ними могут оказаться нужные посетителю элементы страницы. Поэтому у меня блок исчезает, как только посетитель убирает мышку с элемента, для которого установлена подсказка. Кроме того, подсказок может быть несколько, поэтому необходима возможность работы с ними одновременно. Причем одновременно две подсказки не должны быть видимы никогда. В результате получилось два JavaScript класса. Плюс для их работы нужна библиотека jQuery. Посмотреть демоверсию можно здесь. Я использовал такие подсказки для всех элементов горизонтального меню. Первый класс (Popup) – создает подсказки и содержит методы для управления ими. Второй (PopupContainer) – представляет собой контейнер для хранения экземпляров первого класса, и содержит только один метод addPopup. В качестве параметров он получает id элемента, которому принадлежит подсказка и id блока с самой подсказкой. Теперь разберем порядок работы эффекта. Как вы понимаете, переход подсказки из одного состояния в другое (видима/невидима) происходит при возникновении определенного события. В данном случае это mouseenter и mouseleave. На следующей диаграмме я показал порядок работы эффекта при возникновении события mouseenter. Прежде всего, обратите внимание на переменные visible и showBegin. В них мы сохраняем текущее состояние подсказки. Если visible == true, то подсказка в данный момент показана. showBegin == true означает, что в данный момент идет анимация. Используя эти переменные, мы можем определить, когда нужно игнорировать событие mouseenter. Представьте ситуацию. Посетитель навел мышку на элемент, начался показ анимации (изменяется прозрачность, и подсказка плавно смещается). В этот момент посетитель перемещает мышь. Что произойдет? Должна ли прерваться анимация? Я решил сделать следующим образом. Анимация продолжается в любом случае, но если посетитель убирает мышку с элемента, то сразу же после ее завершения запускается обратный эффект. Т. е. в результате блок с подсказкой будет скрыт. Для этого, используется переменная nextAction, в которой храниться название метода, который должен быть запущен после завершения анимации. Таким образом, если посетитель уберет мышку с элемента после того как анимация завершилась, то метод hide спрячет подсказку. Если же анимация не завершилась, то метод hide просто установит значение переменной nextAction = ‘hide’. Перед завершением работы метод show проверит состояние nextAction и вызовет метод hide. Т. е. подсказка исчезнет. Диаграмму работы при возникновении события mouseleave я не приводил, т. к. принцип работы такой же. Теперь взгляните на исходный код класса Popup