Форум

hfts_rider · #1 (**permalink**) 16.07.2014, 13:21

Есть галерея, в ней есть картинка и 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);

Но все равно оно не ожидает и делает это мгновенно.. но хоть какой то эффект вышел))

MallSerg · #2 (**permalink**) 16.07.2014, 13:32

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

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

рони · #3 (**permalink**) 16.07.2014, 13:57

hfts_rider,

$('.gallery-win img').stop().animate({'opacity':'0.7'},100,function ()
{
  $(this).attr('src', nextImg).animate({'opacity':'1'},100);
});

hfts_rider · #4 (**permalink**) 16.07.2014, 14:11

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

Я делал так

$('.gallery-win img').stop().animate({'opacity':'0.7'},function(){$(this).attr('src', nextImg).animate({'opacity':'1'},100);},100);

hfts_rider · #5 (**permalink**) 16.07.2014, 14:15

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

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

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

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

Как это можно реализовать?

рони · #6 (**permalink**) 16.07.2014, 14:18

hfts_rider,
а если нет следующего тоды как?

hfts_rider · #7 (**permalink**) 16.07.2014, 14:47

Ну я просто сделал галерею через "data-", задал порядковый номер.. Думал может можно как то более универсальней сделать.

hfts_rider · #8 (**permalink**) 16.07.2014, 14:52

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

hfts_rider · #9 (**permalink**) 16.07.2014, 14:53

Но меня больше интересует почему "next" при "this" у меня не работает..

skrudjmakdak · #10 (**permalink**) 16.07.2014, 14:58

<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>

Форум

Справочник

Discord чат

Курсы javascript