Эффекты в галерее
Есть галерея, в ней есть картинка и 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>
|
| Часовой пояс GMT +3, время: 07:41. |