@spoT1

Проблема с анимацией?

*{
    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);


Почему нижние блоки не двигаются по вертикали?
  • Вопрос задан
  • 69 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
Меняете bottom, который не имеет начального значения - укажите его вместо top.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы