Код выполняется не по порядку

[begovik]

Здравствуйте.
У меня простой код, который должен делать картинку невидимой, менять ссылку на картинку и делать уже другую картинку видимой.
Но код сначала меняет ссылку, а потом скрывает и показывает замененную картинку. Подскажите, в чём дело...

$("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;
})

[j0hnik]

Дело в том что интерпретатор js не будет ждать пока ваш fade выполняется, задержку для остального кода надо добавить самому.

[begovik]

А что нужно дописать?

[j0hnik]

$("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);
	});
});

[begovik]

Спасибо, 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);
   });
})