Следы с использованием jQuery - PullRequest
Новая
       1

Следы с использованием jQuery

1 голос
/ 08 января 2020

Я использую jQuery для создания анимированных следов, как вы можете видеть в этом Codepen .

Моя цель состоит в том, чтобы многократно выполнять анимацию шагов, но однажды функцию CallMe() повторяю, шаги запутались.

Я использовал анимацию от setInterval() до l oop на основе рассчитанного мной времени, но вывод кода не выполняется должным образом. 

$(document).ready(function() {
  callMe();
  setInterval(callMe, 2700);
});
function callMe() {
  //step 1
  $('.leftfoot').fadeIn('fast');
  $('.leftfoot').delay(500).fadeOut('fast');
  $('.rightfoot').fadeIn('fast');
  $('.rightfoot').delay(500).fadeOut('fast');
  //step 2
  setTimeout(function() {
    $(".leftfoot").css('margin-top', '200px');
    $('.leftfoot').fadeIn('fast');
    $('.leftfoot').delay(500).fadeOut('fast');
  }, 700);
  setTimeout(function() {
    $(".rightfoot").css('margin-top', '250px');
    $('.rightfoot').fadeIn('fast');
    $('.rightfoot').delay(500).fadeOut('fast');
  }, 700);
  //step 3
  setTimeout(function() {
    $(".leftfoot").css('margin-top', '150px');
    $('.leftfoot').fadeIn('fast');
    $('.leftfoot').delay(500).fadeOut('fast');
  }, 1500);
  setTimeout(function() {
    $(".rightfoot").css('margin-top', '200px');
    $('.rightfoot').fadeIn('fast');
    $('.rightfoot').delay(500).fadeOut('fast');
  }, 1500);
}
body {
  background-image: url("http://www.thevideogenius.com/wordpress/wp-content/uploads/2011/10/Chalkboard-Website-Background-measure-3.png");
}

.leftfoot {
  background-image: url("https://cdn.onlinewebfonts.com/svg/img_432519.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  width: 30px;
  height: 60px;
  display: inline-block;
  margin-top: 250px;
  position: absolute;
}

.rightfoot {
  margin-top: 300px;
  background-image: url("https://www.shareicon.net/data/128x128/2016/06/18/596019_right_512x512.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  width: 60px;
  height: 60px;
  margin-left: 30px;
  display: inline-block;
  position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <center>
    <div class="leftfoot"></div>
    <div class="rightfoot"></div>
  </center>
</body>

Есть ли более эффективный способ l oop шагов?

1 Ответ

0 голосов
/ 08 января 2020

Если вы ищете причину, по которой шаги не сбрасываются после выполнения интервала, это потому, что вам нужно сбросить поля обратно в начальную точку.

Добавьте это в начало callMe () 

  $(".leftfoot").css('margin-top', '250px');
  $(".rightfoot").css('margin-top', '300px');

Обновление

Я внес несколько изменений в работу шагов в JavaScript. Это должно сделать шаги более плавными, и у вас не будет столько тайм-аутов для работы, только интервал. Вы можете настроить totalSteps, stepDistancePX и stepStartPX, чтобы шаги проходили на большее расстояние или делали шаги больше или меньше. 

var steps = {
    stepLengthMS : 500,
    stepDelayMS : 200,
    totalSteps : 6,
    stepDistancePX : 200,
    stepStartPX : 300,
    currentStep : 0
};

step();
setInterval(step, steps.stepLengthMS + steps.stepDelayMS);

function step() {
    if (steps.currentStep == 0) {
        $(".rightfoot").hide();
        $(".leftfoot").hide();
    } else {
        var isRightFoot = (steps.currentStep % 2) == 1;
        var topPX = steps.stepStartPX - parseInt((steps.stepDistancePX / (steps.totalSteps - 1)) * steps.currentStep);

        if (isRightFoot) {
            $(".rightfoot").css('margin-top', topPX+'px');
            $('.rightfoot').fadeIn('fast');
            $('.rightfoot').delay(steps.stepLengthMS).fadeOut('fast');
        } else {
            $(".leftfoot").css('margin-top', topPX+'px');
            $('.leftfoot').fadeIn('fast');
            $('.leftfoot').delay(steps.stepLengthMS).fadeOut('fast');
        }
    }

    steps.currentStep++;
    if (steps.currentStep > steps.totalSteps) {
        steps.currentStep = 1;
    }
}

CSS и HTML одинаковы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...