- Поисковые системы
- Практика оптимизации
- Трафик для сайтов
- Монетизация сайтов
- Сайтостроение
- Социальный Маркетинг
- Общение профессионалов
- Биржа и продажа
- Финансовые объявления
- Работа на постоянной основе
- Сайты - покупка, продажа
- Соцсети: страницы, группы, приложения
- Сайты без доменов
- Трафик, тизерная и баннерная реклама
- Продажа, оценка, регистрация доменов
- Ссылки - обмен, покупка, продажа
- Программы и скрипты
- Размещение статей
- Инфопродукты
- Прочие цифровые товары
- Работа и услуги для вебмастера
- Оптимизация, продвижение и аудит
- Ведение рекламных кампаний
- Услуги в области SMM
- Программирование
- Администрирование серверов и сайтов
- Прокси, ВПН, анонимайзеры, IP
- Платное обучение, вебинары
- Регистрация в каталогах
- Копирайтинг, переводы
- Дизайн
- Usability: консультации и аудит
- Изготовление сайтов
- Наполнение сайтов
- Прочие услуги
- Не про работу
Маркетинг для шоколадной фабрики. На 34% выше средний чек
Через устранение узких мест
Оксана Мамчуева
В 2023 году Одноклассники пресекли более 9 млн подозрительных входов в учетные записи
И выявили более 7 млн подозрительных пользователей
Оксана Мамчуева
Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий
Здравствуйте, подскажите, какие изменения в коде нужно внести, чтобы подсказка была ниже всех элементов кнопки и не принимала участия в трансформации css (оставалась статичной).
Код прилагаю.
https://jsfiddle.net/w6d5cjqv
Попробуйте вынести подсказку из трансформируемого блока.
Спасибо, но мне как начинающему будет нелегко это сделать, может подскажете, как это реализовать?
Вот этот кусок
выдерните из кода и вставьте в конце кода. Может быть, надо будет весь код обернуть в div - но это по обстоятельствам. И посмотреть, что-то может быть надо изменить к стилях для .callback_hoverМожет быть, надо будет весь код обернуть в div - но это по обстоятельствам. И посмотреть, что-то может быть надо изменить к стилях для .callback_hover
Добавил div, переместил <div class="callback_hover"><span>Подсказка</span></div>, так подсказка не участвует в анимации и находится ниже остальных элементов кнопки. Теперь нужно как-то привязать подсказку к кнопке, что можно со стилями сделать?
---------- Добавлено 14.09.2017 в 08:48 ----------
Пока такой результат
https://jsfiddle.net/w6d5cjqv/1/
В скрипте в двух местах замените
на Правда, остальной код там не идеален, но это уже другой вопрос.Спасибо, теперь при наведении курсора подсказка появляется за кнопкой. Но есть один момент. При движении кнопки вверх или вниз, при наведении в таком случае подсказка появляется не за кнопкой, а сразу внизу или вверху, там куда должна "приехать" кнопка. Я немного уменьшил скорость анимации скрипта, чтобы это было заметно. Что можно с этим сделать?
Правда, остальной код там не идеален, но это уже другой вопрос.
Согласен, коду далеко до идеала, но саму кнопку проверял в разных браузерах, кнопка и анимация везде смотрится корректно. Был бы признателен, если бы вы могли указать на неточности в коде, хотелось бы его доработать до нормального состояния.
Есть еще вопрос.
При обновлении страницы, при первом наведении курсора, подсказка появляется не плавно, без паузы, указанной в скрипте animate({'opacity':1},1000). Все последующие наведения скрипт отрабатывает корректно.
Еще раз спасибо за поддержку.
---------- Добавлено 14.09.2017 в 15:36 ----------
Обновленный код
https://jsfiddle.net/w6d5cjqv/4/
Из стилей .callback_hover уберите display: none; и сделайте opacity: 0;
Да, теперь подсказка появляется плавно, осталось только проблема с подсказкой, опережающей кнопку, если на нее навести курсор.
https://jsfiddle.net/w6d5cjqv/5/
Ничего там не опережает.
Немного не так. Если обновить страницу и навести курсор, тогда не опережает, но если после остановки кнопки скролить вниз или вверх, кнопка начнет падать (подсказка не должна быть активна) и в момент ее движения активировать подсказку, то она появляется не на уровне кнопки, а в месте, где кнопка должна остановиться.
Добавил фон для наглядности.
https://jsfiddle.net/w6d5cjqv/6/