Код выполняется не по порядку
Здравствуйте.
У меня простой код, который должен делать картинку невидимой, менять ссылку на картинку и делать уже другую картинку видимой. Но код сначала меняет ссылку, а потом скрывает и показывает замененную картинку. Подскажите, в чём дело...
$("nav").on("click", "div", function () {
$(".photo img").fadeTo(400, 0);
$(this).addClass("current").siblings().removeClass("current");
$(".photo img").attr("src", $(this).attr("link"));
$(".photo img").fadeTo(400, 1);
return false;
})
|
Дело в том что интерпретатор js не будет ждать пока ваш fade выполняется, задержку для остального кода надо добавить самому.
|
А что нужно дописать?
|
$("nav").on("click", "div", function () {
$(".photo img").fadeTo(400, 0, function () {
$(this).addClass("current").siblings().removeClass("current");
$(this).attr("src", $(this).attr("link"));
$(this).fadeTo(400, 1);
});
});
|
Спасибо, j0hnik, всё работает!
Вот пока разбирался, несколько раз приходила мысль: "вот если бы к .fadeTo можно было бы дописать третий параметр...", а оно оказывается можно)) Немного переделал код, а то он атрибут от себя к себе присваивал, вот как получилось: HTML:
<div class="container outer">
<div class="photo"><img src="imgs/7.jpg" alt=""></div>
<nav>
<div class="current" link="imgs/7.jpg"><img src="imgs/7.jpg" alt=""></div>
<div link="imgs/8.jpg"><img src="imgs/8.jpg" alt=""></div>
<div link="imgs/9.jpg"><img src="imgs/9.jpg" alt=""></div>
</nav>
</div>
и JS:
$("nav").on("click", "div", function () {
$(this).addClass("current").siblings().removeClass("current");
$(".photo img").fadeTo(400, 0, function(){
$(this).attr("src", $("nav .current").attr("link"));
$(this).fadeTo(200, 1);
});
})
|
| Часовой пояс GMT +3, время: 17:01. |