Почему код не выполняется по очереди? Делает одновременно. Как его можно заставить выполнять сначала разворот, потом уже увеличение высоты и ширины контейнера .cube
, и потом уже увеличение высоты и ширины у самой стороны #side2
(к примеру). Свойство delay
не работает, не знаю почему, может не туда ставлю. Подскажите пожалуйста если можете.
JS:
$(".link2").on("click", function() {
$('.cube').css("transform", "rotate3d(0,1,0,270deg)");
$('.main-cube').css("top", "10%");
$(".cube").addClass("active-cube");
$('#side2').delay(2500)
.animate({ width: "90vw" }, 1000 )
.animate({ height: "90vh" }, 1000 );
});
CSS:
.active-cube {
width: 90vw;
height: 45vh;
}
.cube