Добрый день, уважаемые, подскажите как написать код что б у дивов за определенное время (по порядку) значение ширины становились значениями их высоты и наоборот, значения высот становились значениями ширины.
*ПС размеры каждого дива разные.
Небольшой набросок
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#field {
position: relative;
width: 600px;
height: 600px;
border: 1px solid black;
background-color: red;
}
#bigBlock {
position: relative;
width: 500px;
height: 500px;
border: 1px solid black;
margin-top: 5%;
margin-left: 5%;
/*background: url("snowboarder-400x385.png") 50% 50% no-repeat;*/
}
.block {
position: absolute;
border: 3px solid white;
-webkit-box-shadow: -10px 17px 25px 11px rgba(0, 0, 0, 0.6);
-moz-box-shadow: -10px 17px 25px 11px rgba(0, 0, 0, 0.6);
box-shadow: -10px 17px 25px 11px rgba(0, 0, 0, 0.6);
transform-origin: center;
}
.picture2 {
}
#bigBlock div:nth-child(1) {
width: 45%;
height: 20%;
top: 76%;
left: 38%;
background-color: #ED5A00;
background-position: -165px -295px;
z-index: 7;
}
#bigBlock div:nth-child(2) {
width: 55%;
height: 25%;
top: 50%;
left: 5%;
background-color: #ED5A00;
background-position: 0px -170px;
z-index: 6;
}
#bigBlock div:nth-child(3) {
width: 20%;
height: 20%;
top: 30%;
left: 6%;
background-color: #ED5A00;
background-position: -5px -70px;
z-index: 5;
}
#bigBlock div:nth-child(4) {
width: 35%;
height: 20%;
top: 29%;
left: 27%;
background-color: #ED5A00;
background-position: -110px -70px;
z-index: 4;
}
#bigBlock div:nth-child(5) {
width: 15%;
height: 20%;
top: 27%;
left: 63%;
background-color: #ED5A00;
background-position: -292px -62px;
z-index: 3;
}
#bigBlock div:nth-child(6) {
width: 12%;
height: 10%;
top: 43%;
left: 79%;
background-color: #ED5A00;
background-position: -365px -135px;
z-index: 2;
}
#bigBlock div:nth-child(7) {
width: 35%;
height: 30%;
top: 0%;
left: 27%;
background-color: #ED5A00;
background-position: -110px 70px;
z-index: 1;
}
</style>
</head>
<body>
<div id="field">
<div id="bigBlock">
<div class="block picture2">1</div>
<div class="block picture2">2</div>
<div class="block picture2">3</div>
<div class="block picture2">4</div>
<div class="block picture2">5</div>
<div class="block picture2">6</div>
<div class="block picture2">7</div>
</div>
</div>
</body>
</html>
window.onload = function () {
var $elem = $('#bigBlock div');
$elem.eq(1).changeSizes;
function changeSizes() {
var oldWidth = $(this).css('width'),
oldHeight = $(this).css('height');
if (oldWidth > oldHeight ) {
while ($(this).css('width') != oldHeight )
{ $(this).css('width')- 1; }
while ($(this).css('height') != oldWidth)
{ $(this).css('height')+ 1; }
} else {
while ($(this).css('width') != oldHeight )
{ $(this).css('width')+ 1; }
while ($(this).css('height') != oldWidth)
{ $(this).css('height')- 1; }
}
},1000
);
}
}
Мой код не работает
