2

Как по клику на кнопку начать анимацию элементов по очереди, и чтобы она повторялась бесконечно?

Анимация должна быть следующая:

  • первый элемент (красный квадрат) передвинулся полностью,

  • когда первый элемент передвинулся полностью, через короткую паузу второй элемент (зеленый) передвинулся,

  • длинная пауза,

  • после длинной паузы второй элемент вернулся на место,

  • когда второй элемент вернулся на место, через короткую паузу первый элемент вернулся на место

  • длинная пауза, и т.д. всё повторяется

$("button").click(function {
  function sam() {
    $(".box_one").animate({
      left: '200px'
    }, 3000, 'linear', sam);
    $(".box_two").animate({
      left: '400px'
    }, 3000, 'linear', sam);
  }
  sam();
});
.box_one {
  position: absolute;
  top: 40px;
  width: 50px;
  height: 50px;
  background-color: red;
  left: 0;
}

.box_two {
  position: absolute;
  top: 100px;
  width: 50px;
  height: 50px;
  background-color: green;
  left: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="active">Включить анимацию</button>
<div class="box_one"></div>
<div class="box_two"></div>

8
  • воспользуйтесь css @keyframes анимацией 21 фев 2020 в 16:24
  • @StrangerintheQ А всё равно ее нужно же запускать по кнопке
    – user373224
    21 фев 2020 в 16:29
  • останется по кнопке повесить класс 21 фев 2020 в 16:29
  • @StrangerintheQ а разве через keyframes можно сделать, чтобы она продолжалась бесконечно, и кроме этого еще и соблюдалась очередь анимации элементов?
    – user373224
    21 фев 2020 в 16:32
  • Вы напишите или продемонстрируйте как-то чего Вы добиваетесь 21 фев 2020 в 16:34

1 ответ 1

2

Дополнение с изменениями автора:

    function moove1(){
        $(".box_one").animate({
            left: '200px'
        }, 3000, 'linear');
        setTimeout(function () {
            moove2();
        }, 4000);
    }
    function moove2(){
        $(".box_two").animate({
            left: '400px'
        }, 3000, 'linear');
        setTimeout(function () {
            moove3();
        }, 4000);
    }
    function moove3(){
        $(".box_two").animate({
            left: '0px'
        }, 3000, 'linear');
        setTimeout(function () {
            moove4();
        }, 4000);
    }
    function moove4(){
        $(".box_one").animate({
            left: '0px'
        }, 3000, 'linear');
        setTimeout(function () {
            moove1();
        }, 7000);
    }
    $("button").on('click', function() {
        function func() {
            setTimeout(function () {
                moove1();
            }, 2000);
        }
        func();

    });
    .box_one {
        position: absolute;
        top: 40px;
        width: 50px;
        height: 50px;
        background-color: red;
        left: 0;
    }

    .box_two {
        position: absolute;
        top: 100px;
        width: 50px;
        height: 50px;
        background-color: green;
        left: 0;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="active">Включить анимацию</button>
<div class="box_one"></div>
<div class="box_two"></div>

Если сразу перемещать.

    $("button").on('click', function() {
        function sam() {
            $(".box_one").animate({
                left: '200px'
            }, 3000, 'linear', sam);
            $(".box_two").animate({
                left: '400px'
            }, 3000, 'linear', sam);
            $(".box_one").animate({
                left: '0px'
            }, 3000, 'linear', sam);
            $(".box_two").animate({
                left: '0px'
            }, 3000, 'linear', sam);
        }
        setTimeout(sam(), 1000);
    });
    .box_one {
        position: absolute;
        top: 40px;
        width: 50px;
        height: 50px;
        background-color: red;
        left: 0;
    }

    .box_two {
        position: absolute;
        top: 100px;
        width: 50px;
        height: 50px;
        background-color: green;
        left: 0;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="active">Включить анимацию</button>
<div class="box_one"></div>
<div class="box_two"></div>

3
  • Denis640Kb, здравствуйте. Нет, немного не так. Нужно, чтобы красный квадрат передвинулся. После этого через короткую паузу передвинулся зеленый. Потом длинная пауза, и после длинной паузы зеленый вернулся на свое место, и затем через короткую паузу красный вернулся на место. Потом снова длинная пауза и повторение.
    – user373224
    21 фев 2020 в 17:34
  • @Николай.В. Добавил.
    – Denis640Kb
    21 фев 2020 в 17:51
  • Denis640Kb, спасибо. Успехов вам!
    – user373224
    22 фев 2020 в 6:05

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки