Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.07.2014, 13:21
Аватар для hfts_rider
Профессор
Отправить личное сообщение для hfts_rider Посмотреть профиль Найти все сообщения от hfts_rider
 
Регистрация: 26.01.2014
Сообщений: 181

Эффекты в галерее
Есть галерея, в ней есть картинка и 2 кнопки вперед и назад, при нажатии на которые меняется url картинки.

Можно ли как то добавить плавный эффект?

Допустим что бы вначале выполнилось действие aminate({'opacity':'0'},200) после этого сменился url, а только после этого aminate({'opacity':'1'},200).

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

Возможно ли это?

Или подскажите может как то по другому в этом случаи можно добавить эффект.

Единственное до чего я додумался это:
$('.gallery-win img').stop().animate({'opacity':'0.7'},100).attr('src', nextImg).animate({'opacity':'1'},100);

Но все равно оно не ожидает и делает это мгновенно.. но хоть какой то эффект вышел))
Ответить с цитированием
  #2 (permalink)  
Старый 16.07.2014, 13:32
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 1,127

Анимация работает асинхронно
т.е. запускается setTimeOut или AnimationFrame через определенные промежутки времени
т.е. просто задаются задачи которые выполнятся в будущем (будут менять css свойства)
при вызове функции animate можно передать параметром функцию котороя выполнится по завершении анимации
http://api.jquery.com/animate/ 4й параметр функции

имхо так делать анимацию нельзя.

Последний раз редактировалось MallSerg, 16.07.2014 в 13:40.
Ответить с цитированием
  #3 (permalink)  
Старый 16.07.2014, 13:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

hfts_rider,
$('.gallery-win img').stop().animate({'opacity':'0.7'},100,function ()
{
  $(this).attr('src', nextImg).animate({'opacity':'1'},100);
});
Ответить с цитированием
  #4 (permalink)  
Старый 16.07.2014, 14:11
Аватар для hfts_rider
Профессор
Отправить личное сообщение для hfts_rider Посмотреть профиль Найти все сообщения от hfts_rider
 
Регистрация: 26.01.2014
Сообщений: 181

Спасибо!
Я вначале так и делал, но у меня не работало из-за того что я функцию ставил как третий а не четвертый параметр.

Я делал так
$('.gallery-win img').stop().animate({'opacity':'0.7'},function(){$(this).attr('src', nextImg).animate({'opacity':'1'},100);},100);
Ответить с цитированием
  #5 (permalink)  
Старый 16.07.2014, 14:15
Аватар для hfts_rider
Профессор
Отправить личное сообщение для hfts_rider Посмотреть профиль Найти все сообщения от hfts_rider
 
Регистрация: 26.01.2014
Сообщений: 181

Еще есть вопрос.

Допустим есть 5 img
При нажатии на любой из них, берется атрибут scr со следующего.

Как это реализовать?
я пробовал через next, не вышло...

$(this).next().attr(...)


Как это можно реализовать?
Ответить с цитированием
  #6 (permalink)  
Старый 16.07.2014, 14:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

hfts_rider,
а если нет следующего тоды как?
Ответить с цитированием
  #7 (permalink)  
Старый 16.07.2014, 14:47
Аватар для hfts_rider
Профессор
Отправить личное сообщение для hfts_rider Посмотреть профиль Найти все сообщения от hfts_rider
 
Регистрация: 26.01.2014
Сообщений: 181

Ну я просто сделал галерею через "data-", задал порядковый номер.. Думал может можно как то более универсальней сделать.
Ответить с цитированием
  #8 (permalink)  
Старый 16.07.2014, 14:52
Аватар для hfts_rider
Профессор
Отправить личное сообщение для hfts_rider Посмотреть профиль Найти все сообщения от hfts_rider
 
Регистрация: 26.01.2014
Сообщений: 181

Возможно как то перебрать все картинки в определенном блоке и занести их в массив, а с массива уже будет выбираться порядковый номер.
Ответить с цитированием
  #9 (permalink)  
Старый 16.07.2014, 14:53
Аватар для hfts_rider
Профессор
Отправить личное сообщение для hfts_rider Посмотреть профиль Найти все сообщения от hfts_rider
 
Регистрация: 26.01.2014
Сообщений: 181

Но меня больше интересует почему "next" при "this" у меня не работает..
Ответить с цитированием
  #10 (permalink)  
Старый 16.07.2014, 14:58
Профессор
Отправить личное сообщение для skrudjmakdak Посмотреть профиль Найти все сообщения от skrudjmakdak
 
Регистрация: 27.04.2012
Сообщений: 1,410

<html>
	<head>
		<title>example</title>
		<style>
		.bl
		{
		width: 50px;
		height: 50px;
		margin: 5px;
		float: left;
		border: 1px solid black;
		}
		</style>
	</head>
	<body>
		<div>
			<div class="bl" num="1"></div>
			<div class="bl" num="2"></div>
			<div class="bl" num="3"></div>
			<div class="bl" num="4"></div>
			<div class="bl" num="5"></div>
			<div class="bl" num="6"></div>
			<div class="bl" num="7"></div>
		</div>
		<p></p>
		<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
		<!--<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
		<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">-->
		<script>
$('.bl').click(function ()
	{
	console.log($(this).next().attr('num'));
	});
		</script>
	</body>
</html>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Расчет реальных размеров изображения в галерее Vision Элементы интерфейса 7 10.07.2012 21:56
Плавное перемещение картинок в галерее Адриан Общие вопросы Javascript 0 09.02.2012 20:43
Эффекты для расписания alexan0308 Ваши сайты и скрипты 2 17.12.2011 09:29
Эффекты для меню Wital jQuery 3 11.01.2011 16:32
Canvas - эффекты к изображениям? Qwe2Qwe Общие вопросы Javascript 1 27.02.2010 20:21