|
|
Регистрация Восстановить пароль |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
|
Опции темы | Поиск в этой теме |
24.09.2018, 22:20 | #1 |
Новичок
Джуниор
Регистрация: 24.09.2018
Сообщений: 6
|
помогите сделать плавный переход на Jquery
Код:
Здравствуйте. при наведении на объект меняется его бэкграунд. это происходит резко. Нужно сделать этот переход плавным. Спасибо заранее Последний раз редактировалось Вадим Мошев; 24.09.2018 в 23:38. |
24.09.2018, 23:39 | #2 |
Старожил
Регистрация: 12.11.2010
Сообщений: 8,568
|
Попробуйте в CSS классе active прописать
Код:
|
25.09.2018, 01:19 | #3 |
Новичок
Джуниор
Регистрация: 24.09.2018
Сообщений: 6
|
|
25.09.2018, 03:34 | #4 | |
Форумчанин
Регистрация: 05.09.2017
Сообщений: 157
|
Цитата:
Можно придумать и другие технологии, но проще всего подкладывать одну картинку под другую и менять opacity, либо делать анимационные эффекты с помощью .animate(), тем более на jQuery у вас подключена. Вот тут есть идеи и демонстрашки для Cross fading images, в том числе и чистый CSS с подкладыванием одной картинки под другую: HTML Код:
Код:
Безопасность с Content Security Policy
Последний раз редактировалось Ottava; 25.09.2018 в 03:44. |
|
25.09.2018, 10:31 | #5 | |
Новичок
Джуниор
Регистрация: 24.09.2018
Сообщений: 6
|
Цитата:
Я все это уже попробовала. Opacity 0 на Opacity 1 срабатывает только после того как изображение уже сменилось. То есть происходит резкая смена изображение и затем появляется другое изображение с opacity 0 на opacity 1 Вот сам код: Код:
Код:
Код:
Последний раз редактировалось Jinna; 25.09.2018 в 10:51. |
|
25.09.2018, 11:07 | #6 |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
Ты картинки задай сразу, а не только активному классу, за анимацию пусть opacity отвечает. Тогда и надобность в jQuery отпадет.
Наличие/отсутствие картинки в бэкграунде — дискретное свойство, оно не может меняться через трансишен, так как не может картинка быть подключенной на пол шишечки.
Alar, верни репу!
|
25.09.2018, 11:15 | #7 | |
Новичок
Джуниор
Регистрация: 24.09.2018
Сообщений: 6
|
Цитата:
Мне кажется тут без JS не обойтись. Последний раз редактировалось Jinna; 25.09.2018 в 11:19. |
|
25.09.2018, 11:59 | #8 | |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
Цитата:
Alar, верни репу!
|
|
26.09.2018, 15:00 | #9 | ||
Форумчанин
Регистрация: 05.09.2017
Сообщений: 157
|
Цитата:
Цитата:
То есть, вам надо, чтобы по событию onHover на пункте меню менялась картинка бэкграунда, а на всех остальных пунктах возвращалась изначальная картинка?
Безопасность с Content Security Policy
Последний раз редактировалось Ottava; 26.09.2018 в 15:06. |
||
26.09.2018, 19:37 | #10 |
Форумчанин
Регистрация: 05.09.2017
Сообщений: 157
|
Jinna, у меня вот такой код работает с плавным переходом. В IE будут проблемы, но там и ваш исходный код отображается криво (проверял в IE 8)
CSS Код:
Картинка чуть дергается тк у вас стоит в одном месте transform: scale(1.1); а в другом transform: scale(1); - из за этого меняется масштаб бэкграунда в момент события onHover. Может, так и было задумано... И время перехода - 2s, меняйте на нужное вам. HTML, он остался ваш, только я убрал "active" из всех элементов, кроме главной страницы Код:
Безопасность с Content Security Policy
Последний раз редактировалось Ottava; 26.09.2018 в 19: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 |