使用jQuery的脚步图

问题描述 投票：1回答：1

我正在使用jQuery创建动画脚印，如您在此Codepen中所见。

我的目标是重复实现足迹动画，但是一旦重复CallMe()功能，足迹就会迷惑自己。

我已经使用setInterval()根据我计算的时间来循环播放动画，但是代码输出无法正确执行。

$(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>

有没有更有效的方法来追踪足迹？

jquery html css
1个回答
0
投票

如果您正在寻找间隔运行后未重置步骤的原因，那是因为您需要将边距重置为起点。

将其添加到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相同。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.