如何使用 jquery 为 10 个连续元素设置动画

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 为 10 个连续元素设置动画

how to animate 10 consecutive elements using jquery

html

css

jquery

jquery-animate