![]() |
|
|
Регистрация Восстановить пароль |
Повторная активизация e-mail |
Регистрация | Задать вопрос | Заплачу за решение | Новые сообщения Сообщения за день | Расширенный поиск | Правила | Всё прочитано |
![]() |
|
Опции темы |
![]() |
#1 |
Новичок
Джуниор
Регистрация: 24.09.2018
Сообщений: 6
Репутация: 10
|
![]() Код:
Здравствуйте. при наведении на объект меняется его бэкграунд. это происходит резко. Нужно сделать этот переход плавным. Спасибо заранее Последний раз редактировалось Вадим Мошев; 25.09.2018 в 00:38. |
![]() |
![]() |
![]() |
#2 |
гигаМодератор :)
Заслуженный модератор
Регистрация: 12.11.2010
Адрес: Адрес: Адрес: Адрес: Адрес: Адрес: Адрес: Адрес: Адрес:
Сообщений: 7,955
Репутация: 3920
|
![]()
Попробуйте в CSS классе active прописать
Код:
|
![]() |
![]() |
![]() |
#3 |
Новичок
Джуниор
Регистрация: 24.09.2018
Сообщений: 6
Репутация: 10
|
![]() |
![]() |
![]() |
![]() |
#4 | |
Форумчанин
Регистрация: 05.09.2017
Сообщений: 130
Репутация: 121
|
![]() Цитата:
Можно придумать и другие технологии, но проще всего подкладывать одну картинку под другую и менять opacity, либо делать анимационные эффекты с помощью .animate(), тем более на jQuery у вас подключена. Вот тут есть идеи и демонстрашки для Cross fading images, в том числе и чистый CSS с подкладыванием одной картинки под другую: HTML Код:
Код:
Последний раз редактировалось Ottava; 25.09.2018 в 04:44. |
|
![]() |
![]() |
![]() |
#5 | |
Новичок
Джуниор
Регистрация: 24.09.2018
Сообщений: 6
Репутация: 10
|
![]() Цитата:
Я все это уже попробовала. Opacity 0 на Opacity 1 срабатывает только после того как изображение уже сменилось. То есть происходит резкая смена изображение и затем появляется другое изображение с opacity 0 на opacity 1 Вот сам код: Код:
Код:
Код:
Последний раз редактировалось Jinna; 25.09.2018 в 11:51. |
|
![]() |
![]() |
![]() |
#6 |
Раздолбайских Дел
Профессионал
Регистрация: 22.05.2009
Адрес: Екатеринбург
Сообщений: 3,749
Репутация: 2322
|
![]()
Ты картинки задай сразу, а не только активному классу, за анимацию пусть opacity отвечает. Тогда и надобность в jQuery отпадет.
Наличие/отсутствие картинки в бэкграунде — дискретное свойство, оно не может меняться через трансишен, так как не может картинка быть подключенной на пол шишечки.
__________________
Работаю. В этот раз за деньги. Жду ваши искренние спасибы на яндекс-кошелек: 410011068154587 |
![]() |
![]() |
![]() |
#7 | |
Новичок
Джуниор
Регистрация: 24.09.2018
Сообщений: 6
Репутация: 10
|
![]() Цитата:
Мне кажется тут без JS не обойтись. Последний раз редактировалось Jinna; 25.09.2018 в 12:19. |
|
![]() |
![]() |
![]() |
#8 | |
Раздолбайских Дел
Профессионал
Регистрация: 22.05.2009
Адрес: Екатеринбург
Сообщений: 3,749
Репутация: 2322
|
![]() Цитата:
__________________
Работаю. В этот раз за деньги. Жду ваши искренние спасибы на яндекс-кошелек: 410011068154587 |
|
![]() |
![]() |
![]() |
#9 | ||
Форумчанин
Регистрация: 05.09.2017
Сообщений: 130
Репутация: 121
|
![]() Цитата:
Цитата:
![]() То есть, вам надо, чтобы по событию onHover на пункте меню менялась картинка бэкграунда, а на всех остальных пунктах возвращалась изначальная картинка? Последний раз редактировалось Ottava; 26.09.2018 в 16:06. |
||
![]() |
![]() |
![]() |
#10 |
Форумчанин
Регистрация: 05.09.2017
Сообщений: 130
Репутация: 121
|
![]()
Jinna, у меня вот такой код работает с плавным переходом. В IE будут проблемы, но там и ваш исходный код отображается криво (проверял в IE 8)
CSS Код:
Картинка чуть дергается тк у вас стоит в одном месте transform: scale(1.1); а в другом transform: scale(1); - из за этого меняется масштаб бэкграунда в момент события onHover. Может, так и было задумано... И время перехода - 2s, меняйте на нужное вам. HTML, он остался ваш, только я убрал "active" из всех элементов, кроме главной страницы Код:
Последний раз редактировалось Ottava; 26.09.2018 в 20:44. |
![]() |
![]() |
![]() |
Опции темы | |
|
|
![]() |
||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Плавный переход к метке jQuery 1.9.1 | patch | JavaScript, Ajax | 3 | 06.06.2013 20:16 |
Плавный переход от формы-картинки к фону | Crystallon | Общие вопросы Delphi | 1 | 01.08.2012 09:25 |
Как в делфи сделать переход по ссылке | artbotva | Общие вопросы Delphi | 11 | 06.05.2012 21:13 |
JQuery - переход по URL после анимации | D-Snaker | JavaScript, Ajax | 5 | 18.09.2011 21:29 |
Плавный переход между картинками | ZvEr_HaCkEr | Мультимедиа в Delphi | 11 | 03.06.2011 02:39 |
|
|