JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Квадратэ</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="script3.js"></script>
</head>
<body>
<div id="container">
<div id="one"></div>
<div id="two"></div>
<div id="three" ></div>
</div>
</div>
</body>
</html>
CSS
#container { /* контейнер, объядиняющий 3 блока (нужен для выравнивания их по центру)*/
position: absolute; /* Абсолютное позиционирование (т.е. координаты слоя вычисляются относительно левого верхнего угла окна) */
width: 630px; /* ширина контейнера=длина каждого из 3 болков+ширина бордеров каждого блока слева и справа=3*(200+5+5)*/
height: 200; /* Высота слоя в пикселах */
left: 50%; /* Положение слоя от левого края */
top: 50%; /* Положение слоя от верхнего края */
margin-left: -315px; /* Отступ слева */
margin-top: -100px; /* Отступ сверху */
}
#one { /* блок 1*/
width: 200px;
height: 200px;
float: left; /* Состыковка с соседним слоем */
background: green;
border: 5px solid black; /* размер, стиль и цвет бордера - границы */
}
#two { /* блок 2*/
width: 200px;
height: 200px;
float: left;
background: red;
border: 5px solid black;
}
#three { /* блок 3*/
width: 200px;
height: 200px;
float: left;
background: blue;
border: 5px solid black;
}
JavaScript
$(document).ready(function moveBottom(){
$("#three").click(function(){
window_height=$(window).height();
$("html").css('overflow-y','hidden');
$("#two").css('position','relative') /* нужна для сдвига элемента зачем-то... */
.animate({top:window_height}, {duration:1500});
$("#three").css('position','relative')
.animate({right:'210px'}, {duration:3000, complete:function(){
$("#three").animate({left:'100px'}, 1500);
$("#one").css('position','relative')
.animate({left:'100px'}, 1500)
;}
});
});
});