代码之家 › 专栏 › 技术社区 › Hank

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

jquery-animate css html jquery

-1

Hank · 技术社区 · 6 年前

<i> 元素的子元素 <div> 我喜欢通过jquery创建一个动画,将它们放大3倍,然后再缩小到原始大小。这很简单,但我想做的是:

让它开始缩放,然后在它完成之前(比如说通过它的转换或变换的三分之一)开始下一个元素,依此类推。

一旦到了终点,就重新开始。通过所有元素的单个循环应为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>

1 回复 | 直到 6 年前

Gerard 6 年前

我想这就是你想要的。我已经在源文件中记录了。

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