Анимация 3 разных Divs

Question

Я ищу способ сделать 3 divs летать на клик. Один DIV сверху, один слева, а один справа (как слева, так и справа внизу). Я хочу сделать так, чтобы все они летали (сверху сверху, слева направо и справа), когда я нажимаю, используя JQuery. Проблема, с которой я столкнулась, - это то, что я не смог заставить их летать в нужном месте.

Heres JSfiddle для того, как он настроен в данный момент, чтобы дать вам визуальное представление о том, как я хочу, чтобы они летали. CSS ниже. Любая помощь приветствуется!

https://jsfiddle.net/v59yLz3p/

Heres мой CSS:

.topcontent 
    { 
     top: 0; 
     background-color: green; 
     height: 30vh; 

    } 

    .leftcontent 
    { 
     height: 70vh; 
     width: 50%; 
     position: relative; 
     float: left; 
     background-color: red; 
    } 
    .rightcontent 
    { 
     height: 70vh; 
     width: 50%; 
     position: relative; 
     float: right; 
     background-color: blue; 

    } 

Спасибо!

Answer 1

Как это выглядит? В принципе, поскольку у вас есть ваш набор vh, вы можете позиционировать элементы отрицательного значения top, left, and right. Затем при нажатии кнопки вы устанавливаете top, left, and right элементов в 0 (их исходное местоположение).

Я добавил немного непрозрачности там, вы можете удалить, если хотите.

Fiddle