помогите сделать плавный переход на Jquery - JavaScript, Ajax

Jinna · 24.09.2018, 22:20

Код:

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

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

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

Вадим Мошев · 24.09.2018, 23:39

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

Код:

transition: all 0.5s

Jinna · 25.09.2018, 01:19

Цитата:

Сообщение от Вадим Мошев

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

Код:

transition: all 0.5s

Пробовала. Не получается. Он срабатывает только после того как сменилось изображение. мне нужно чтобы сам переход был плавный что одно затухает а другое плавно появляется.

Ottava · 25.09.2018, 03:34

Цитата:

Сообщение от 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;}

Jinna · 25.09.2018, 10:31

Цитата:

Сообщение от 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 только начала изучать. Помогите Плииииииииз

Naive · 25.09.2018, 11:07

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

Jinna · 25.09.2018, 11:15

Цитата:

Сообщение от Naive

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

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

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

Naive · 25.09.2018, 11:59

Цитата:

Сообщение от Jinna

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

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

Да, в таком случае проще через js сделать. Но через CSS тоже можно.

Ottava · 26.09.2018, 15:00

Цитата:

Сообщение от Jinna

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

Там в посте же есть ссылка на demo проверьте что в третьем примере "opacity transition between 2 images" на CSS всё меняется плавно.

Цитата:

Сообщение от Jinna

а мне нужно чтобы картинка которая сменила другую оставалась активной если убрать мышь с ссылки в пустое пространство и менять ее если навести на другую ссылку и сделать активной уже ее

О, а это уже новые требования, которые не были озвучены в стартпосте

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

Ottava · 26.09.2018, 19:37

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>

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

24.09.2018, 22:20	#1
Jinna Новичок Джуниор Регистрация: 24.09.2018 Сообщений: 6	помогите сделать плавный переход на Jquery Код: `$(document).on('mouseover', '.nav-menu .nav-column', function(){ $(this).addClass('active').siblings().removeClass('active') });` Пожалуйста, оформляйте Ваш код согласно правилам. Здравствуйте. при наведении на объект меняется его бэкграунд. это происходит резко. Нужно сделать этот переход плавным. Спасибо заранее Последний раз редактировалось Вадим Мошев; 24.09.2018 в 23:38.

24.09.2018, 23:39	#2
Вадим Мошев Старожил Регистрация: 12.11.2010 Сообщений: 8,568	Попробуйте в CSS классе active прописать Код: `transition: all 0.5s`

25.09.2018, 11:07	#6
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	Ты картинки задай сразу, а не только активному классу, за анимацию пусть opacity отвечает. Тогда и надобность в jQuery отпадет. Наличие/отсутствие картинки в бэкграунде — дискретное свойство, оно не может меняться через трансишен, так как не может картинка быть подключенной на пол шишечки. Alar, верни репу!

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

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