как анимировать 10 последовательных элементов с помощью jquery - PullRequest
Новая
       8

как анимировать 10 последовательных элементов с помощью jquery

0 голосов
/ 10 октября 2018

У меня есть 10 <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 Ответ

0 голосов
/ 10 октября 2018

Я думаю, что это то, что вы после.Я задокументировал в источнике. 

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