Как просто и быстро создать анимацию движения?
Собственно вопрос в топике. Большая просьба не предлагать по возможности использовать всякие штуки вроде JQuery и ей подобных, я всё-таки учусь и хочу чтобы код был по максимуму самописный. Если конечно это возможно.
Анимировать мне нужно некую панельку сверху, этакую информационную вкладку. Я хотел бы, чтобы при наведении мыши на нужный угол экрана она плавно выезжала, а при отведении указателя плавно сворачивалась с некоторой задержкой. И чтобы всё было гладко, без рывков, и не угрожало сильно производительности :) Вот адрес где можно посмотреть что необходимо. Панелька уже есть, теперь б анимацию только добавить :) http://popov654.pp.ru/parser3/main.html В нижнем фрейме нажмите на кнопку "Анализ", всё появится само) |
|
Спасибо)
Я уже сделал анимацию, прочитав другую статью на эту тему, чуть попроще) Но я обязательно почитаю потом Анимация у меня вроде как получилась, мне даже удалось решить три главных задачи: обеспечить скрытие начиная с произвольного места (точнее с того места, где вкладка остановила своё движение), выезд с произвольного места (аналогично), и третье - это ликвидация некого странного глюка, из-за которого вкладка начинала вдруг резко уходить назад (похоже, что моя див-подложка на которую я повесил обработчики мыши отчего-то перемещалась вместе с самой панелькой). Третью проблему я решил, вбив костыли, определяющие абсолютную координату указателя по высоте. И всё бы ничего... Да вот только моя анимация получилась без преувеличения сказать уж очень фирменной, ибо работает она только в IE. С одной стороны, повод гордиться. С другой - а как же остальные пользователи? У них панель вообще никуда не уезжает! Надо либо решить эту проблему, либо придётся для других браузеров мутить что-нибудь другое - например, затухание в полупрозрачность. Через фильтры или jQuery. Работы много, но возможно оно даже того соит. И всё-таки мне интересно, почему в Mozilla и Opera не заработало :) P.S. После всех манипуляций консоль ошибок в Mozilla ничего не выдала. Значит, код корректный. В чём же проблема? Может, им не дано элементу с position: fixed назначить отрицательные координаты? :blink: А ещё говорят IE стандартам не соответствует :D |
А, сорри, кажется знаю в чём дело. Похоже, было непозволительной вольностью опустить постфикс 'px' при изменении свойства top, а IE просто мне это простил.
Добвлено через 2 минуты: Да, так оно и оказалось. Однако даже когда я это исправил, панель не желает появляться обратно в Mozilla (в Опере всё ОК!). Ошибок в консоли JS нет. Подозреваю, что в Mozilla что-то происходит не так с моей подложкой, на которую повешено onMouseOver. То есть она и впрямь не расположена там, где должна быть (хотя для неё отдельно прописаны все CSS атрибуты, дублирующие атрибуты панельки, за исключением z-index, который, понятное дело, другой). Как лечить?.. |
Заменил onMouseEnter на onMouseOver - помогло. Но перестало всё работать в IE. Пришлось определять браузер в функции инициализации, и в случае Mozilla и ей подобных (на ядре Gecko) вызывать
document.getElementById('wrapper').addEventListener("mouseover" , showTab, true); Проблема решена полностью. P.S. В IE всё вдруг снова отвалилось, но вышеприведённый код на сей раз не при чём (если его убрать ничего не меняется). Пошёл создавать новую тему :) |
Часовой пояс GMT +3, время: 04:21. |