jQuery анимация слева направо с пробелом

Question

Пожалуйста, посмотрите на справочный сайт (https://gperrine.wixsite.com/yy-samples).. Вы можете видеть анимированные синие линии слева направо. Мне нужна именно эта анимация в коде jQuery с таким же пробелом. Кто-то, пожалуйста, помогите. Ссылка 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>

Вы также можете проверить это здесь