По второму клику анимация выполняется с середины скрипта

[x3zone]

Здравствуйте!
Есть код

$('.map_but1').click(animateChel);
var chelPos = true;
function animateChel(){
$('.map_auto').animate({"opacity":"0"},100)
if(chelPos == true){
chelPos = false;
$(this).css({"background-image":"url(./img/map_but1.png)"})
$('.map_but2').css({"background-image":"url(./img/map_but2.png)"})
$('.map_chel').animate({"opacity":"1"},300);
function chel2(){
$('.map_chel2').animate({"opacity":"1"},300);
$('.map_chel2').animate({"right":"290px","top":"90px"},1000);
$('.map_chel2').animate({"right":"395px","top":"235px"},800);//2 клик начинается с этой анимации
}
function chel(){
$('.map_chel').animate({"left":"265px","bottom":"150px"},1000);
$('.map_chel').animate({"left":"312px","bottom":"215px"},800);//2 клик начинается с этой анимации
}
setTimeout(chel,600);
setTimeout(chel2,300);
}
return chelPos = true;
}

Вся анимация выпоняется только по первому клику,по каждому последующему выпоняется с середины скрипта.Не понимаю почему так.

[Your]

Ничего не понятно, давайте полный рабочий код, со всеми элементами, иначе на чем проверять?

Самому писать лень.

[a_l]

И не мудрено, поскольку эти функции выполняются одновременно:

$('.map_chel2').animate({"right":"290px","top":"90px"},1000);
$('.map_chel2').animate({"right":"395px","top":"235px"},800);

Чтобы выполнить их по очереди:

$('.map_chel2').animate({"right":"290px","top":"90px"},1000,"linear", function() {
$('.map_chel2').animate({"right":"395px","top":"235px"},800);
});