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

我有一个文本“HELLO”，我想循环浏览每个字母并设置动画，使其淡入淡出。这是我的代码

编辑：我将答案放在代码段中以查看它的实际效果

代码：

$（文档）.ready（函数（）{
var$letters=$（'p[id^=“letter-”）；
$letters.每个（函数（索引）{
$（this.css）({
“动画”：“脉冲500毫秒”+指数*500+“毫秒”+“线性”
})
});
})；

html，
身体{
字体大小：45px；
}
p{
位置：绝对位置；
左：400px；
顶部：100px；
颜色：rgba（0,0,0,0）；
}
@关键帧脉冲{
0% {
颜色：rgba（0,0,0,0）；
}
25% {
颜色：rgba（0,0,0,0.5）；
}
50% {
颜色：rgba（0,0,0,1）；
}
75% {
颜色：rgba（0,0,0,0.5）；
}
100% {
颜色：rgba（0,0,0,0）；
}
}

H
E
L
L
O

将

动画延迟

与循环变量结合使用：

$（文档）.ready（函数（）{
对于（变量i=0；i<5；i++）{
$（'#'+i）.css({
“动画”：“脉冲0.5s线性”，
“动画延迟”：i+“s”
})
}
})；

html，
身体{
字体大小：45px；
}
p{
位置：绝对位置；
左：400px；
顶部：100px；
颜色：rgba（0,0,0,0）；
}
@关键帧脉冲{
0% {
颜色：rgba（0,0,0,0）；
}
25% {
颜色：rgba（0,0,0,0.5）；
}
50% {
颜色：rgba（0,0,0,1）；
}
75% {
颜色：rgba（0,0,0,0.5）；
}
100% {
颜色：rgba（0,0,0,0）；
}
}

H
E
L
L
O

有一件事你应该绝对正确，那就是你的

id

s的命名。一个数字就是

更好的选择可能是将它们命名为

letter-0

，

letter-1

，等等

接下来，您可以使用

动画延迟

属性来偏移每个动画的开头。我们将使用速记

动画

属性。为此，我们将找到每个元素，每个元素都有一个

id

以

字母-

开头，然后循环遍历它们。对于每个连续的字母，我们将添加动画，并包含一个动画延迟为

500ms

*其在字符串中的位置索引。例如，第一个字母（索引

0

）的动画延迟为

0ms

。第二个字母（索引

1

）的动画延迟为

500ms

，依此类推

$（文档）.ready（函数（）{
var$letters=$（'p[id^=“letter-”）；
$letters.每个（函数（索引）{
$（this.css）({
“动画”：“脉冲500毫秒”+指数*500+“毫秒”+“线性”
})
});
})；

html，
身体{
字体大小：45px；
}
p{
位置：绝对位置；
左：400px；
顶部：100px；
颜色：rgba（0,0,0,0）；
}
@关键帧脉冲{
0% {
颜色：rgba（0,0,0,0）；
}
25% {
颜色：rgba（0,0,0,0.5）；
}
50% {
颜色：rgba（0,0,0,1）；
}
75% {
颜色：rgba（0,0,0,0.5）；
}
100% {
颜色：rgba（0,0,0,0）；
}
}

H
E
L
L
O

循环不是在做动画，它只是在更改CSS。浏览器在Javascript完成时执行动画。要扩展@Barmar，循环在毫秒内执行，因此类添加得非常紧密，动画似乎同时开始。它不等待第一个动画完成在开始下一个动画之前，请单击“sh”。@Barmar所以循环将css分配给所有元素，然后浏览器立即执行所有元素？是的。如果您想在不同的时间启动动画，可以使用

setTimeout

或

setInterval

延迟更改每个css。@BrettDeWoody哦，我明白了。那么有没有其他方法可以这样做呢手动设置css？你能复制代码片段并编辑你的更改，这样我们就可以看到它的运行了吗？这实际上是我的想法。我只是认为正常的循环会像python一样工作，直到一个动画停止，然后再开始下一个。我改进了解决方案，包括关于你正在使用的

id

的注释。这太好了。我唯一不知道的是“index”参数的值来自何处。jQuery是否会自动为其分配“$letters”，因为它是函数被调用的变量？每次调用时都会传递当前循环迭代。在本例中，

each（）

在

$letters

数组上被调用，我将一个名称（

index

）传递给回调函数，用作迭代索引的变量名。在

each（）

循环的第一次迭代中，

index

是

0

，在第二次循环中

index

是

1

，等等。