Последовательная анимация
 

Здравствуйте коллеги. Никак не могу реализовать выполнение анимации на jQuery последовательно. Есть 5 блоков (box1, box2, box3, box4 и box5) Нужно чтобы после анимации 4-х блоков, запустилась анимация 5-го блока. Проблема в том, что все 5 блоков выполняют свою анимацию параллельно(сразу все). Просьба помочь, может кто сталкивался..:stop:

$(document).ready(function(){


$(".run1").click(function(){

$("#box1").animate({opacity: "0.1" , height: "20", width: "20" , left: "+=600"}, 600)
.animate({opacity: "0.4", top: "+=60", height: "20", width: "20"}, "slow", 600)
.animate({opacity: "1", left: "600", height: "300", width: "270"}, "slow")
.animate({top: "100"}, "fast")
.animate({height: 'hide'}, 100);

$("#box2").animate({opacity: "0.1" , height: "20", width: "20" }, 300)
.animate({opacity: "1", height: "300", width: "270"}, "slow")
.animate({height: 'hide'}, 100);

$("#box3").animate({opacity: "0.1" , height: "20", width: "20" }, 600)
.animate({opacity: "1", height: "300", width: "270"}, "slow")
.animate({height: 'hide'}, 100);

$("#box4").animate({opacity: "0.1" , height: "20", width: "20" }, 600)
.animate({opacity: "1", height: "300", width: "270"}, "slow")
.animate({height: 'hide'}, 100);

$("#box5")
.animate({height: 'show'}, 300);
});

в очередь поставьте

Спасибо за ответ, но что -то не получается... И везде пишут что на опера очередь иногда не работает, странно...

не верьте! и выложите что вышло

Уже 2-й день мучусь, а результат тот же... просьба помочь с кодом)) Знаю, что тут пару строк нужно добавить, но незнаю каких...

$(".run1").click(function(){

$("#box1").animate({opacity: "0.1" , height: "20", width: "20" , left: "+=600"}, 600)
.animate({opacity: "0.4", top: "+=60", height: "20", width: "20"}, "slow", 600)
.animate({opacity: "1", left: "600", height: "300", width: "270"}, "slow")
.animate({top: "100"}, "fast")
.animate({height: 'hide'}, 100);

$("#box2").animate({opacity: "0.1" , height: "20", width: "20" }, 300)
.animate({opacity: "1", height: "300", width: "270"}, "slow")
.animate({height: 'hide'}, 100);

$("#box3").animate({opacity: "0.1" , height: "20", width: "20" }, 600)
.animate({opacity: "1", height: "300", width: "270"}, "slow")
.animate({height: 'hide'}, 100);

$("#box4").animate({opacity: "0.1" , height: "20", width: "20" }, 600)
.animate({opacity: "1", height: "300", width: "270"}, "slow")
.animate({height: 'hide'}, 100);

$("box5").queue(function () { // добавим новую функцию в очередь
$(this).dequeue(); // ! продолжим очередь !
});

$("#box5")
.animate({height: 'show'}, 300);
});