Здравствуйте коллеги. Никак не могу реализовать выполнение анимации на jQuery последовательно. Есть 5 блоков (box1, box2, box3, box4 и box5) Нужно чтобы после анимации 4-х блоков, запустилась анимация 5-го блока. Проблема в том, что все 5 блоков выполняют свою анимацию параллельно(сразу все). Просьба помочь, может кто сталкивался..
$(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);
});