为什么javascript在元素中循环，但同时对所有元素执行jQuery函数？

Question

我有一个文本"HELLO“，我想循环遍历每一个字母，并将其动画化，这样它就会消失，这是我的代码。

编辑:我把答案放在代码片段中，以便看到它的实际效果。

代码：

​

$(document).ready(function() {
  var $letters = $('p[id^="letter-"');
  $letters.each(function(index) {
    $(this).css({
      'animation': 'pulse 500ms ' + index * 500 + 'ms' + ' linear'
    })
  });
});

html,
body {
  font-size: 45px;
}

p {
  position: absolute;
  left: 400px;
  top: 100px;
  color: rgba(0, 0, 0, 0);
}

@keyframes pulse {
  0% {
    color: rgba(0, 0, 0, 0);
  }
  25% {
    color: rgba(0, 0, 0, 0.5);
  }
  50% {
    color: rgba(0, 0, 0, 1);
  }
  75% {
    color: rgba(0, 0, 0, 0.5);
  }
  100% {
    color: rgba(0, 0, 0, 0);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id='letter-0'>H</p>
<p id='letter-1'>E</p>
<p id='letter-2'>L</p>
<p id='letter-3'>L</p>
<p id='letter-4'>O</p>

​

这是一个指向钢笔的链接。它不是一次只做一个字母的动画，而是在once.How将整个事情动画化，这能被修复吗？循环不应该完成所有命令的执行，然后继续下一步吗？也许有更好的方法来解决这个我不知道？

Answer 1

您应该绝对正确的一件事是命名您的ids，一个数字是id。

更好的选择可能是将它们命名为letter-0、letter-1等。

接下来，您可以使用animation-delay属性来抵消每个动画的开始。我们将使用速记animation属性。为此，我们将找到以id开头的letter-元素，然后循环遍历它们。对于每一个连续的字母，我们将添加动画，并在字符串中包含500ms *其位置索引的动画延迟。例如，第一个字母(索引0)将具有0ms的动画延迟。第二个字母(索引1)将具有500ms的动画延迟，等等。

​

$(document).ready(function() {
  var $letters = $('p[id^="letter-"');
  $letters.each(function(index) {
    $(this).css({
      'animation': 'pulse 500ms ' + index * 500 + 'ms' + ' linear'
    })
  });
});

html,
body {
  font-size: 45px;
}

p {
  position: absolute;
  left: 400px;
  top: 100px;
  color: rgba(0, 0, 0, 0);
}

@keyframes pulse {
  0% {
    color: rgba(0, 0, 0, 0);
  }
  25% {
    color: rgba(0, 0, 0, 0.5);
  }
  50% {
    color: rgba(0, 0, 0, 1);
  }
  75% {
    color: rgba(0, 0, 0, 0.5);
  }
  100% {
    color: rgba(0, 0, 0, 0);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id='letter-0'>H</p>
<p id='letter-1'>E</p>
<p id='letter-2'>L</p>
<p id='letter-3'>L</p>
<p id='letter-4'>O</p>

​

Answer 2

结合循环变量使用animation-delay：

​

$(document).ready(function() {
  for (var i = 0; i < 5; i++) {
    $('#' + i).css({
      'animation': 'pulse 0.5s linear',
      'animation-delay': i + 's'
    })
  }
});

html,
body {
  font-size: 45px;
}

p {
  position: absolute;
  left: 400px;
  top: 100px;
  color: rgba(0, 0, 0, 0);
}

@keyframes pulse {
  0% {
    color: rgba(0, 0, 0, 0);
  }
  25% {
    color: rgba(0, 0, 0, 0.5);
  }
  50% {
    color: rgba(0, 0, 0, 1);
  }
  75% {
    color: rgba(0, 0, 0, 0.5);
  }
  100% {
    color: rgba(0, 0, 0, 0);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id='0'>H</p>
<p id='1'>E</p>
<p id='2'>L</p>
<p id='3'>L</p>
<p id='4'>O</p>

​