Question

我有10个<i>元素，它们是<div>的子元素，它们都显示为白色圆圈。我喜欢通过jquery创建一个动画，将它们按x3放大，然后又缩小到原始大小。本身就很容易，但是我想做的是：

具有一个这样的元素就可以开始缩放，然后在此操作完成之前（假设是其过渡或变换的三分之一）开始下一个元素，依此类推。

到达终点后，请重新启动。通过所有元素的单个循环应为3秒。

希望有人能指出我正确的方向。

[更新]我想利用jquery .animate（）功能来代替关键帧和CSS动画

.spinner {
  background-color: black; /*So you can see the circles*/
}

.spinner i {
  display: block;
  position: absolute;
  opacity: 1;
}

.spinner i b {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 6px;
  background: white;
  box-shadow: 0px 0px 14px white;
}

<div id="spinner" class="spinner">
  <i><b></b></i><!--1-->
  <i><b></b></i><!--2-->
  <i><b></b></i><!--3-->
  <i><b></b></i><!--4-->
  <i><b></b></i><!--5-->
  <i><b></b></i><!--6-->
  <i><b></b></i><!--7-->
  <i><b></b></i><!--8-->
  <i><b></b></i><!--9-->
  <i><b></b></i><!--10-->
</div>

Answer 1

我认为这就是你所追求的。我已经在源文件中进行了记录。

$(".spinner i").each( function(index, element) {
  const delay = 0.3*index; /* Calculate delay for current element */
  $(element).attr("style","animation-delay:"+delay+"s"); /* Apply delay */
  $(element).addClass("anim"); /* Start the animation */
});

.spinner {
  background-color: black;
  height: 100vh;
  /*So you can see the circles*/
}

.spinner i {
  display: block;
  position: absolute;
  opacity: 1;
}

.spinner i b {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 6px;
  background: white;
  box-shadow: 0px 0px 14px white;
}
/* Class to define the settings for the animation */
.spinner i.anim {
  animation-name: scale;
  animation-duration: 0.3s; /* Total duration / 10 */
  animation-iteration-count: infinite; /* Repeat forever */
}
/* Animation of the scale */
@keyframes scale {
    0%, 100%  {transform: scale(1);}
    50%  {transform: scale(3);}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="spinner" class="spinner">
  <i><b></b></i>
  <!--1-->
  <i><b></b></i>
  <!--2-->
  <i><b></b></i>
  <!--3-->
  <i><b></b></i>
  <!--4-->
  <i><b></b></i>
  <!--5-->
  <i><b></b></i>
  <!--6-->
  <i><b></b></i>
  <!--7-->
  <i><b></b></i>
  <!--8-->
  <i><b></b></i>
  <!--9-->
  <i><b></b></i>
  <!--10-->
</div>

如何使用jquery

1 个答案: