jQuery - последовательность операций

[shooretz]

Требуется добиться последовательного (неодновременного) выполнения трех команд: скрытие, изменение атрибутов и последующий показ изображения.

Имеется такой код:

$("#Img").animate({opacity: "0"}, "slow");

$("#Img").attr({ src: "new_img.jpg", alt: "New alt" });

$("#Img").animate({opacity: "1"}, "slow");

Этот код исполненяется в другом порядке: сначала происходит смена изображения, затем его скрытие и показ.

Почему это происходит и как добиться нужного эффекта?

[Veseloff]

Надо просто сделать задержку. Типа такого

<script type="text/javascript">
function test(id)
{
	if (id==1)
	{
		$("#Img").animate({opacity: "0"}, "slow"); 
		setTimeout("test(2)",1000);
	}
	else
	{
		$("#Img").attr({ src: "5.jpg", alt: "New alt" });
		$("#Img").animate({opacity: "1"}, "slow");
	}
}
</script>
<img src="3.jpg" onClick="test(1);" id="Img">

У меня нормально заработало

[Jenek]

Анимация выполняется асинхронно, по завершении вызывается callback (3-й параметр) которым и нужно пользоваться.

$("#Img").animate({opacity: "0"}, "slow", function() {
  $("#Img").attr({ src: "new_img.jpg", alt: "New alt" });
  $("#Img").animate({opacity: "1"}, "slow");
});

ключевая ссылка по jQuery

http://docs.jquery.com/Main_Page

Edited June 23, 2009 by Jenek

[shooretz]

Лично мне способ от Jenek кажется более правильным, на нем я и остановлюсь. Просто судя по документации для animate() требуется 'easing', но оказывается он не обязателен.

Спасибо!