Эффекты в галерее
Есть галерея, в ней есть картинка и 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);
Но все равно оно не ожидает и делает это мгновенно.. но хоть какой то эффект вышел)) |
Анимация работает асинхронно
т.е. запускается setTimeOut или AnimationFrame через определенные промежутки времени т.е. просто задаются задачи которые выполнятся в будущем (будут менять css свойства) при вызове функции animate можно передать параметром функцию котороя выполнится по завершении анимации http://api.jquery.com/animate/ 4й параметр функции имхо так делать анимацию нельзя. |
hfts_rider,
$('.gallery-win img').stop().animate({'opacity':'0.7'},100,function ()
{
$(this).attr('src', nextImg).animate({'opacity':'1'},100);
});
|
Спасибо!
Я вначале так и делал, но у меня не работало из-за того что я функцию ставил как третий а не четвертый параметр. Я делал так
$('.gallery-win img').stop().animate({'opacity':'0.7'},function(){$(this).attr('src', nextImg).animate({'opacity':'1'},100);},100);
|
Еще есть вопрос.
Допустим есть 5 img При нажатии на любой из них, берется атрибут scr со следующего. Как это реализовать? я пробовал через next, не вышло... $(this).next().attr(...) Как это можно реализовать? |
hfts_rider,
а если нет следующего тоды как? |
Ну я просто сделал галерею через "data-", задал порядковый номер.. Думал может можно как то более универсальней сделать.
|
Возможно как то перебрать все картинки в определенном блоке и занести их в массив, а с массива уже будет выбираться порядковый номер.
|
Но меня больше интересует почему "next" при "this" у меня не работает..
|
<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>
|
|
<html>
<head>
<title>example</title>
<style>
.bl
{
width: 50px;
height: 50px;
margin: 5px;
float: left;
border: 1px solid black;
}
.big_container
{
width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="big_container"></div>
<div>
<div class="bl" color="red" style="background-color: red;"></div>
<div class="bl" color="yellow" style="background-color: yellow;"></div>
<div class="bl" color="blue" style="background-color: blue;"></div>
<div class="bl" color="silver" style="background-color: silver;"></div>
<div class="bl" color="orange" style="background-color: orange;"></div>
<div class="bl" color="green" style="background-color: green;"></div>
<div class="bl" color="aqua" style="background-color: aqua;"></div>
</div>
<input type="button" value="назад" class="prev"> | <input type="button" value="вперед" class="next">
<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>
var select,
big_container = $('.big_container');
$('.bl').click(function ()
{
select = this;
big_container.css('background', $(this).attr('color'));
});
$('.prev').click(function ()
{
if (!select)
return;
var _select = $(select).prev();
if (_select.length == 0)
return;
select = _select;
big_container.css('background', $(select).attr('color'));
});
$('.next').click(function ()
{
if (!select)
return;
var _select = $(select).next();
if (_select.length == 0)
return;
select = _select;
big_container.css('background', $(select).attr('color'));
});
</script>
</body>
</html>
|
skrudjmakdak,
Немного не то, ты все время прописываешь атрибут, а я думал может было бы лучше без него. |
hfts_rider,
неужели алгоритм если нет следующего брать первый а если нет предыдущего брать последний, вам неподошёл? |
Цитата:
|
| Часовой пояс GMT +3, время: 03:52. |