javascript - jQuery动画从左到右有间隙

Question

请查看引用站点 ( https://gperrine.wixsite.com/yy-samples )。您可以看到蓝线从左到右动画。我需要 jQuery 代码中具有相同 gap 的动画。有人请帮忙。引用 https://gperrine.wixsite.com/yy-samples

代码

$(document).ready(function () {
  var j = 10;
  for (i = 0; i < 10; i++) {
    $('.target').append('<div class="test" id="div' + i + '" style="margin-right: '+j+'px" />');
    j = j - 1;
  }
});

div.test {
  width: 10px;
  height: 0px;
  background: #253f80;
  float: left;
  transform: rotate(6deg);
  height: 70px;
}
body {
  background: #f2f2f2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="target"></div>

Answer 1

您可以使用 jquery animate 为 div 设置动画。

请参阅下面的代码段:

$(document).ready(function () {
  var j = 10;
  var incremenetby = 20;
  for (i = 0; i < 10; i++) {
    $('#div'+i).css("left", j+"px");
    j = j + incremenetby;
    incremenetby -= 1;
  }
});

window.setTimeout(animateMe(), 1000);

function animateMe(){
  var j = 100;
  var incremenetby = 20;
  for (let i = 9; i >= 0; i--) {
    $('#div'+i).delay(j).animate({left: "+=100"},500);
    j+=100;
  }
}

div.test {
  width: 10px;
  height: 0px;
  background: #253f80;
  transform: rotate(6deg);
  height: 70px;
  position:absolute;
}
body {
  background: #f2f2f2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="target">
  <div class="test" id="div0"></div>
  <div class="test" id="div1"></div>
  <div class="test" id="div2"></div>
  <div class="test" id="div3"></div>
  <div class="test" id="div4"></div>
  <div class="test" id="div5"></div>
  <div class="test" id="div6"></div>
  <div class="test" id="div7"></div>
  <div class="test" id="div8"></div>
  <div class="test" id="div9"></div>
</div>

也可以测试一下here