Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.10.2016, 13:31
Новичок на форуме
Отправить личное сообщение для vovk_a Посмотреть профиль Найти все сообщения от vovk_a
 
Регистрация: 01.12.2015
Сообщений: 7

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

Есть две картинки и кнопка, заключенны они в див. Анимация через viber.

Суть анимации: одна картинка изначально на весь див, при наведении курсора картинка меняется на другую и появляется кнопка. Все это выезжает в верх.

Проблема: принаведении все работает замечательно. А при клике на кнопку (на кнопке обработчик click) открывается overlay с картинкамиии текстом описания. И после закрытия этого overlay картинки в div-е отображаются на половину, тоесть видна только половина картинки первой и второй. А кнопка которая должна была быть в низу div-а находится по средине.

Кто чем может помочь, пожалуйста???
Заранее спасибо!!!!
Ответить с цитированием
  #2 (permalink)  
Старый 22.10.2016, 14:43
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

У вас какая-то ошибка в коде.
Заранее незачто.
__________________
29375, 35
Ответить с цитированием
  #3 (permalink)  
Старый 27.10.2016, 07:50
Новичок на форуме
Отправить личное сообщение для vovk_a Посмотреть профиль Найти все сообщения от vovk_a
 
Регистрация: 01.12.2015
Сообщений: 7

Во код который, может кто то скажет где ошибка, я уже пересмотрел перечитал, а так и не разобрал где здесь ошибка.

<div class="shop_image_holder">
	<span class="original_image">
		<img src="img/gir_shop.jpg">
	</span>
	<span class="hover_image">
		<img src="img/gir_shop1.jpg">
	</span>
	<a href="" class="bay_it inline-popups">купить</a>
</div>


$(".shop_holder").on('mouseenter', function () {
		$(this).find('.original_image').stop().animate({top:'-100%'}, 500);
		$(this).find('.hover_image').stop().animate({top:'0%'}, 500, "easeOutQuart");
		$(this).find('.bay_it').stop().animate({top:'76%'}, 500, "easeOutQuart");
	}).on('mouseleave', function () {
		$(this).find('.original_image').stop().animate({top:'0%'}, 500, "easeOutQuart");
		$(this).find('.hover_image').stop().animate({top:'100%'}, 500);
		$(this).find('.bay_it').stop().animate({top:'100%'}, 500);
	});


shop_image_holder
	height: 250px
	width: 250px
	overflow: hidden
	position: relative
	margin: 0px auto
	.original_image
		display: block
		position: absolute
		top: 0px
		height: 250px
		width: 250px
		img
			height: 100%
			width: auto
	.hover_image
		display: block
		position: absolute
		top: 250px
		height: 250px
		width: 250px
		img
			height: 100%
			width: auto
	.bay_it
		height: 24%
		width: 100%
		text-align: center
		font-weight: bold
		font-size: 19px
		padding: 6%
		text-transform: uppercase
		position: absolute
		outline: 0
		top: 100%


А при клике на кнопку (на кнопке обработчик click) открывается overlay с картинкамиии текстом описания. Вот код:
$(".inline-popups").magnificPopup({
	type:'inline',
	midClick: true
});
Ответить с цитированием
  #4 (permalink)  
Старый 28.10.2016, 07:53
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

vovk_a,
Лучше ссылку на демо-онлайн страницу, ибо так дольше спрашивать!
Вряд ли кто из помогающих будет повторять Ваши эксперименты, вдобавок с установкой спецплагинов
Ответить с цитированием
  #5 (permalink)  
Старый 31.10.2016, 15:53
Новичок на форуме
Отправить личное сообщение для vovk_a Посмотреть профиль Найти все сообщения от vovk_a
 
Регистрация: 01.12.2015
Сообщений: 7

Deff,
http://924950.giroboar.web.hosting-test.net/
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Нужен совет, господа fle4er Events/DOM/Window 1 24.11.2014 21:03
Выделение активного пункта меню. Нужен совет! kirian222 Элементы интерфейса 14 17.10.2013 02:50
Нужен совет по созданию эффекта к слайдеру. VadimVL Элементы интерфейса 2 12.02.2013 20:27
Advanced Format, нужен совет знающего devote Оффтопик 13 05.05.2012 22:07
нужен совет кросязычный)) dmitriymar Серверные языки и технологии 2 01.12.2010 21:27