Не срабатывает fadein out и не работает css display block

Неоднократно уже добавлял этот код. Это финальная версия, которую надо бы подрихтовать.

$(".link1").on("click", function() {
    if (!$(this).hasClass("link1"))
                return;
    $(".info").fadeOut(1000);
    $('.side').css("display", "block")
    .animate({ width: "600px" }, 1000 )
    .animate({ height: "600px" }, 1000 );
    $(".cube").css({width: "600px", height: "600px", left: "0"});
    setTimeout (function () {
    $('.cube').css("transform", "rotate3d(0,1,0,0deg)");
    }, 2500 );
    setTimeout (function () {
    $(".cube").css({width: "95vw", height: "45vh"});
    $('.main-cube').css("top", "10%");
    $('.side1')
        .animate({ width: "95vw" }, 1000 )
        .animate({ height: "90vh" }, 1000 );
    }, 5000 );
    $(".info").fadeIn(1000);
    $(".side2, .side3, .side4, .side5, .side6").css("display", "none");
});

Что я хочу?

1. На старте страничка, открытая с контентом, все стороны side, кроме активной имеют display none.
2. При нажатии на link1 контент "info" должен исчезать с помощью fadeOut, все стороны куба должны показаться (свойство display block), чтобы мы видели как сжимается страничка до 600х600 и поворачивается куб.
3. Далее после поворота на нужную сторону, заданную rotate3d, куб начинает разворачиваться до перечисленный значений
4. После этого нужно, чтобы появился контент "info" на развернутой странице с помощью fadeIn
5. Все стороны "side", кроме активной, должны быть display none. Я конечно понимаю что нужно сделать что то типа if (!$(this).css("display", "none")). Но я не понимаю как записать правильно данную команду.

Конкретно тут не работает свойство fadeOut и display block в начале, ну и fadeIn в конце тоже не работает. Помогите пожалуйста.