*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box{
height: 300px;
width: 300px;
background-color: #aeaeae;
margin-left: 30px;
position: relative;
}
.box1{
height: 50px;
width: 50px;
background-color:red;
position: absolute;
right: 250px;
}
.box2{
height: 50px;
width: 50px;
background-color:red;
position: absolute;
left: 250px;
}
.box3{
height: 50px;
width: 50px;
background-color:red;
position: absolute;
top: 250px;
right: 250px;
}
.box4{
height: 50px;
width: 50px;
background-color:red;
position: absolute;
top: 250px;
left: 250px;
}
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js"> <!--<![endif]-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
<button>Push</button>
<script src="script.js" async defer></script>
</body>
</html>
function myAnimation() {
let y = document.querySelector('.box1'),
x = document.querySelector('.box2'),
z = document.querySelector('.box3'),
u = document.querySelector('.box4');
let pos = 0;
let id = setInterval(frame,10);
function frame(){
if(pos == 250){
clearInterval(id);
}
else{
pos++;
y.style.top = pos + 'px';
y.style.right = pos + 'px';
x.style.top = pos + 'px';
x.style.left = pos + 'px';
z.style.right = pos + 'px';
z.style.bottom = pos + 'px';
u.style.bottom = pos + 'px';
u.style.left = pos + 'px';
}
}
}
let btn = document.querySelector('button');
btn.addEventListener('click',myAnimation);
Почему нижние блоки не двигаются по вертикали?
