Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

Вернуться   Форум программистов > Web > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Ответ
 
Опции темы
Старый 24.09.2018, 23:20   #1
Jinna
Новичок
 
Регистрация: 24.09.2018
Сообщений: 6
Репутация: 10
По умолчанию помогите сделать плавный переход на Jquery

Код:

$(document).on('mouseover', '.nav-menu .nav-column', function(){
$(this).addClass('active').siblings().removeClass('active')
});

Пожалуйста, оформляйте Ваш код согласно правилам.

Здравствуйте. при наведении на объект меняется его бэкграунд. это происходит резко. Нужно сделать этот переход плавным. Спасибо заранее

Последний раз редактировалось Вадим Мошев; 25.09.2018 в 00:38.
Jinna вне форума   Ответить с цитированием
Старый 25.09.2018, 00:39   #2
Вадим Мошев
гигаМодератор :)
Заслуженный модератор
 
Аватар для Вадим Мошев
 
Регистрация: 12.11.2010
Адрес: Адрес: Адрес: Адрес: Адрес: Адрес: Адрес: Адрес: Адрес:
Сообщений: 7,684
Репутация: 3715
По умолчанию

Попробуйте в CSS классе active прописать
Код:

transition: all 0.5s

Вадим Мошев на форуме   Ответить с цитированием
Старый 25.09.2018, 02:19   #3
Jinna
Новичок
 
Регистрация: 24.09.2018
Сообщений: 6
Репутация: 10
По умолчанию

Цитата:
Сообщение от Вадим Мошев Посмотреть сообщение
Попробуйте в CSS классе active прописать
Код:

transition: all 0.5s

Пробовала. Не получается. Он срабатывает только после того как сменилось изображение. мне нужно чтобы сам переход был плавный что одно затухает а другое плавно появляется.
Jinna вне форума   Ответить с цитированием
Старый 25.09.2018, 04:34   #4
Ottava
Форумчанин
 
Регистрация: 05.09.2017
Сообщений: 109
Репутация: 121
По умолчанию

Цитата:
Сообщение от Jinna Посмотреть сообщение
Пробовала. Не получается. Он срабатывает только после того как сменилось изображение. мне нужно чтобы сам переход был плавный что одно затухает а другое плавно появляется.
CSS transition криво работает для свойства background-image: при MouseOut в Хроме переход происходит скачком, в FF плавно не происходит вообще. Тогда как для background-color и opacity всё работает отлично (кроме IE младше 10). Можно протестировать в различных браузерах на этой demo.

Можно придумать и другие технологии, но проще всего подкладывать одну картинку под другую и менять opacity, либо делать анимационные эффекты с помощью .animate(), тем более на jQuery у вас подключена.

Вот тут есть идеи и демонстрашки для Cross fading images, в том числе и чистый CSS с подкладыванием одной картинки под другую:
HTML
Код:

<div id="cf">
  <img class="bottom" src="/images/img.jpg" />
  <img class="top" src="/images/img2.jpg" />
</div>

CSS:
Код:

#cf {
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#cf img.top:hover { opacity:0;}


Последний раз редактировалось Ottava; 25.09.2018 в 04:44.
Ottava вне форума   Ответить с цитированием
Старый 25.09.2018, 11:31   #5
Jinna
Новичок
 
Регистрация: 24.09.2018
Сообщений: 6
Репутация: 10
По умолчанию

Цитата:
Сообщение от Ottava Посмотреть сообщение
CSS transition криво работает для свойства background-image: при MouseOut в Хроме переход происходит скачком, в FF плавно не происходит вообще. Тогда как для background-color и opacity всё работает отлично (кроме IE младше 10). Можно протестировать в различных браузерах на этой demo.

Можно придумать и другие технологии, но проще всего подкладывать одну картинку под другую и менять opacity, либо делать анимационные эффекты с помощью .animate(), тем более на jQuery у вас подключена.

Вот тут есть идеи и демонстрашки для Cross fading images, в том числе и чистый CSS с подкладыванием одной картинки под другую:
HTML
Код:

<div id="cf">
  <img class="bottom" src="/images/img.jpg" />
  <img class="top" src="/images/img2.jpg" />
</div>

CSS:
Код:

#cf {
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#cf img.top:hover { opacity:0;}



Я все это уже попробовала. Opacity 0 на Opacity 1 срабатывает только после того как изображение уже сменилось. То есть происходит резкая смена изображение и затем появляется другое изображение с opacity 0 на opacity 1

Вот сам код:

Код:

<nav class="nav-container"> 
	<ul class="nav-menu">
		<li  class="nav-column active"><a href="index.html">Контакты</a><div class="bg bg1"></div></li>
		<li  class="nav-column active"><a href="about.html">Цены</a><div class="bg bg2"></div></li>
		<li  class="nav-column active"><a href="portfolio.html">Стили</a><div class="bg bg3"></div></li>
		<li  class="nav-column active"><a href="#">Услуги</a><div class="bg bg4"></div></li>
		<li  class="nav-column active"><a href="price.html">Обо мне</a><div class="bg bg5"></div></li>
		<li  class="nav-column active"><a href="contact.html">Главная</a><div class="bg bg6"></div></li>
	</ul>
</nav>


Код:

.nav-container {
	width: 100%;
	height: 100vh;
	overflow: hidden;
	margin: 0;
	padding: 0;
	position: fixed;
	top: 0;
	left: 0%;
	transition: 1s ease-in-out;
	z-index: 9999;
}

.nav-menu {
	width: 50%;
	height: 100%;
	box-sizing: border-box;
	display: flex;
	background: black;
	z-index: 1;
	flex-direction: column-reverse;
	align-items: center;
	justify-content: center;
	margin: 0 0 0 50%;
	padding: 0;
}

.nav-menu li {
	list-style: none;
}

.nav-menu a {
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
        font-size: 16px;
        line-height: 46px;
        letter-spacing: 8px;
        text-decoration: none;
        text-transform: uppercase;
        color: white;
}

.nav-menu .nav-column .bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	pointer-events: none;
	z-index: -1;
	transform: scale(1.1);
	background-position: center center;
	transition: 1s ease-in-out;
	
}

.nav-menu .nav-column.active .bg.bg1 {
	background-image: url(../images/menu/double-exposure-1481830_1920.jpg);
	background-size: cover;
	background-position: center center;
	transition: 1s ease-in-out;
	transform: scale(1);
}

.nav-menu .nav-column.active .bg.bg2 {
	background-image: url(../images/menu/makeup-2983550_1920.jpg);
	background-size: cover;
	background-position: center center;
	transition: 1s ease-in-out;
	transform: scale(1);
}

.nav-menu .nav-column.active .bg.bg3 {
	background-image: url(../images/menu/man-1209947_1920.jpg);
	background-size: cover;
	background-position: center center;
	transition: 1s ease-in-out;
	transform: scale(1);
}

.nav-menu .nav-column.active .bg.bg4 {
	background-image: url(../images/menu/people-3168830_1920.jpg);
	background-size: cover;
	background-position: center center;
	transition: 1s ease-in-out;
	transform: scale(1);
}

.nav-menu .nav-column.active .bg.bg5 {
	background-image: url(../images/menu/portrait-3292287_1920.jpg);
	background-size: cover;
	background-position: center center;
	transition: 1s ease-in-out;
	transform: scale(1);
}

.nav-menu .nav-column.active .bg.bg6 {
	background-image: url(../images/menu/portrait-3223971_1920.jpg);
	background-size: cover;
	background-position: center center;
	transition: 1s ease-in-out;
	transform: scale(1);
}

Код:

$(document).on('mouseover', '.nav-menu .nav-column', function(){		
	$(this).addClass('active').siblings().removeClass('active')
});

Тут короче ссылки и дивы с бэкграундом выведены в два отдельных блока и занимают по половине экрана. И при наведении на ссылки в другой половине экрана меняются изображения. и это происходит резко. я ВСЕ уже перепробовала на CSS. JS только начала изучать. Помогите Плииииииииз

Последний раз редактировалось Jinna; 25.09.2018 в 11:51.
Jinna вне форума   Ответить с цитированием
Старый 25.09.2018, 12:07   #6
Naive
Раздолбайских Дел
Профессионал
 
Аватар для Naive
 
Регистрация: 22.05.2009
Адрес: Екатеринбург
Сообщений: 3,692
Репутация: 2205
По умолчанию

Ты картинки задай сразу, а не только активному классу, за анимацию пусть opacity отвечает. Тогда и надобность в jQuery отпадет.
Наличие/отсутствие картинки в бэкграунде — дискретное свойство, оно не может меняться через трансишен, так как не может картинка быть подключенной на пол шишечки.
__________________
Работаю. В этот раз за деньги.
Жду ваши искренние спасибы на яндекс-кошелек: 410011068154587
Naive вне форума   Ответить с цитированием
Старый 25.09.2018, 12:15   #7
Jinna
Новичок
 
Регистрация: 24.09.2018
Сообщений: 6
Репутация: 10
По умолчанию

Цитата:
Сообщение от Naive Посмотреть сообщение
Ты картинки задай сразу, а не только активному классу, за анимацию пусть opacity отвечает. Тогда и надобность в jQuery отпадет.
Наличие/отсутствие картинки в бэкграунде — дискретное свойство, оно не может меняться через трансишен, так как не может картинка быть подключенной на пол шишечки.
Если так сделать то одна картинка всегда будет активной и картинка будет меняться при наведении на ссылки и если убрать мышь она меняется снова на ту что была изначально. а мне нужно чтобы картинка которая сменила другую оставалась активной если убрать мышь с ссылки в пустое пространство и менять ее если навести на другую ссылку и сделать активной уже ее. как-то так короче... )

Мне кажется тут без JS не обойтись.

Последний раз редактировалось Jinna; 25.09.2018 в 12:19.
Jinna вне форума   Ответить с цитированием
Старый 25.09.2018, 12:59   #8
Naive
Раздолбайских Дел
Профессионал
 
Аватар для Naive
 
Регистрация: 22.05.2009
Адрес: Екатеринбург
Сообщений: 3,692
Репутация: 2205
По умолчанию

Цитата:
Сообщение от Jinna Посмотреть сообщение
Если так сделать то одна картинка всегда будет активной и картинка будет меняться при наведении на ссылки и если убрать мышь она меняется снова на ту что была изначально. а мне нужно чтобы картинка которая сменила другую оставалась активной если убрать мышь с ссылки в пустое пространство и менять ее если навести на другую ссылку и сделать активной уже ее. как-то так короче... )

Мне кажется тут без JS не обойтись.
Да, в таком случае проще через js сделать. Но через CSS тоже можно.
__________________
Работаю. В этот раз за деньги.
Жду ваши искренние спасибы на яндекс-кошелек: 410011068154587
Naive вне форума   Ответить с цитированием
Старый 26.09.2018, 16:00   #9
Ottava
Форумчанин
 
Регистрация: 05.09.2017
Сообщений: 109
Репутация: 121
По умолчанию

Цитата:
Сообщение от Jinna Посмотреть сообщение
Я все это уже попробовала. Opacity 0 на Opacity 1 срабатывает только после того как изображение уже сменилось. То есть происходит резкая смена изображение и затем появляется другое изображение с opacity 0 на opacity 1
Там в посте же есть ссылка на demo проверьте что в третьем примере "opacity transition between 2 images" на CSS всё меняется плавно.


Цитата:
Сообщение от Jinna Посмотреть сообщение
а мне нужно чтобы картинка которая сменила другую оставалась активной если убрать мышь с ссылки в пустое пространство и менять ее если навести на другую ссылку и сделать активной уже ее
О, а это уже новые требования, которые не были озвучены в стартпосте

То есть, вам надо, чтобы по событию onHover на пункте меню менялась картинка бэкграунда, а на всех остальных пунктах возвращалась изначальная картинка?

Последний раз редактировалось Ottava; 26.09.2018 в 16:06.
Ottava вне форума   Ответить с цитированием
Старый 26.09.2018, 20:37   #10
Ottava
Форумчанин
 
Регистрация: 05.09.2017
Сообщений: 109
Репутация: 121
По умолчанию

Jinna, у меня вот такой код работает с плавным переходом. В IE будут проблемы, но там и ваш исходный код отображается криво (проверял в IE 8)

CSS
Код:

.nav-container {
	width: 100%;
	height: 100vh;
	overflow: hidden;
	margin: 0;
	padding: 0;
	position: fixed;
	top: 0;
	left: 0%;
	z-index: 9999;
}

.nav-menu {
	width: 50%;
	height: 100%;
	box-sizing: border-box;
	display: flex;
	background: black;
	z-index: 1;
	flex-direction: column-reverse;
	align-items: center;
	justify-content: center;
	margin: 0 0 0 50%;
	padding: 0;
}

.nav-menu li {
	list-style: none;
}

.nav-menu a {
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
        font-size: 16px;
        line-height: 46px;
        letter-spacing: 8px;
        text-decoration: none;
        text-transform: uppercase;
        color: white;
}

.nav-menu .nav-column .bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	pointer-events: none;
	z-index: -1;
	transform: scale(1.1);
	background-position: center center;
	background-size: cover;
	transition: opacity 2s;
	opacity: 0;
}


.nav-menu .nav-column.active .bg {
	transform: scale(1);
	transition: opacity 2s;
	opacity: 1;
}


.nav-menu .nav-column .bg.bg1 {
	background-image: url(http://bgfons.com/uploads/pattern/pattern_texture1157.jpg);
}

.nav-menu .nav-column .bg.bg2 {
	background-image: url(https://otvet.imgsmail.ru/download/4e0ce039dd5c81fb86558fdb3df75d9c_h-2.jpg);
}

.nav-menu .nav-column .bg.bg3 {
	background-image: url(https://www.10wallpaper.com/wallpaper/1680x1050/1207/blue_light_-Abstract_design_wallpaper_1680x1050.jpg);
}

.nav-menu .nav-column .bg.bg4 {
	background-image: url(http://eskipaper.com/images/red-and-green-abstract-1.jpg);
}

.nav-menu .nav-column .bg.bg5 {
	background-image: url(https://look.com.ua/pic/201210/1024x600/look.com.ua-51275.jpg);
}

.nav-menu .nav-column .bg.bg6 {
	background-image: url(http://oboi.tululu.org/o/2/68361/prew.jpg);
}

url картинок верните на свои, я тестировал на чужих картинках.
Картинка чуть дергается тк у вас стоит в одном месте transform: scale(1.1); а в другом transform: scale(1); - из за этого меняется масштаб бэкграунда в момент события onHover. Может, так и было задумано...
И время перехода - 2s, меняйте на нужное вам.


HTML, он остался ваш, только я убрал "active" из всех элементов, кроме главной страницы
Код:

<nav class="nav-container"> 
	<ul class="nav-menu">
		<li  class="nav-column"><a href="index.html">Контакты</a><div class="bg bg1"></div></li>
		<li  class="nav-column"><a href="about.html">Цены</a><div class="bg bg2"></div></li>
		<li  class="nav-column"><a href="portfolio.html">Стили</a><div class="bg bg3"></div></li>
		<li  class="nav-column"><a href="#">Услуги</a><div class="bg bg4"></div></li>
		<li  class="nav-column"><a href="price.html">Обо мне</a><div class="bg bg5"></div></li>
		<li  class="nav-column active"><a href="contact.html">Главная</a><div class="bg bg6"></div></li>
	</ul>
</nav>

Яваскрипт тоже остался ваш.

Последний раз редактировалось Ottava; 26.09.2018 в 20:44.
Ottava вне форума   Ответить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Плавный переход к метке 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


13:21.


Powered by vBulletin® Version 3.8.8 Beta 2
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.

RusProfile.ru


Справочник российских юридических лиц и организаций.
Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru