为什么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> 

这是笔的链接。 动画不是一次制作一个字母，而是整个动画一次，如何解决？ 循环难道不应该完成所有命令的执行， 然后继续下一步吗？ 也许有一种我不知道的更好的方法？

Answer 1

将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> 

Answer 2

您绝对应该纠正的一件事是id的命名。 单个数字不是有效的id 。

更好的选择是为它们命名，例如letter-0 ， letter-1等。

接下来，您可以使用animation-delay属性来偏移每个动画的开始。 我们将使用速记animation属性。 为此，我们将找到每个以letter-开头的id元素，然后循环遍历它们。 对于每个连续的字母，我们将添加动画，并包括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>