Javascript 使用循环一次设置一个项目的动画

我正在尝试创建一个循环，一次为三个项目设置动画。我一直收到这个错误“Uncaught TypeError:无法读取未定义的属性'style'。我认为发生的是，出于某种原因，动画位可能会导致循环一直运行到3，因为位[3]不存在，所以它一直说未定义

var t=document.getElementById（“信息位”）；
var d=t.getElementsByTagName（“tr”）[0]；
变量位=d.getElementsByTagName（“td”）；
对于（变量i=0；i

#信息位td{
保证金：自动；
不透明度：0；
}

信息框1
信息框2
信息框3
var t=document.getElementById（“infoBits”）；
var d=t.getElementsByTagName（“tr”）[0]；
变量位=d.getElementsByTagName（“td”）；
对于（var i=0；i

你有两个问题：

1.运行Opac==1和Opac+=0.001时未设置Opac。所以你的浏览器会崩溃，因为他不能增加一个不存在的数字

2.在等待间隔期间，i增加，因此这将导致意外行为。因此，我通过将i传递给函数来修复它。
您遇到的问题是，外部循环一直在执行，创建了3个setinterval，而i的最终值为3。调用frame函数时，i仍然引用值为3的外部i

您可以使用以下几种策略。创建一个闭包来传递i的值，或者更简单地使用bind函数：setInterval（frame.bind（{theBit:bits[i]}）和insideframe，this.theBit.style.opacity+=0.05

在外部循环中对其求值时，bind函数将创建一个新函数，该集合的值等于bind参数在该时刻的任何值，因此它将为i的每个值创建不同版本的框架函数。
在代码中声明的
opac
在哪里？也许我错了，但没有for循环继续进行，当setInterval触发时，我不再是我了？不要使用HTML表，除非你表示表格数据。使用CSS表、浮点、内联块或flexbox。请更新解释，没有它，@Jonas将不会有多大用处。我明白你的意思。我有变量不匹配。在我的第一次迭代中，pos是我用于动画的变量。我切换到opac以使试图帮助我的人更清楚。我没有错，不会声明opac=0；帧内（）导致间隔无限循环？如果我误解了，请原谅。我对javascript相当陌生。哦，是的。对不起，我的错误。我在JSFIDLE中实现了bind函数，但我不确定是否正确。从理论上讲，这似乎就是答案。
var t = document.getElementById("infoBits");
 var d = t.getElementsByTagName("tr")[0]; 
var bits = d.getElementsByTagName("td"); 
for (var i = 0; i < bits.length; i++) { 
var pos = 0; 
//pass i as argument
var opac=0;
var id = setInterval(frame(i), 100);
 function frame(a){
 if (opac == 1) {
 clearInterval(id);
 } else { 
opac += 0.1; 
bits[a].style.opacity += 0.05; } 
}
 }