如何在 Javascript 中使用 setTimeout 更改样式

Question

（？）我想像动画一样将我的类名“box”从不透明度“0”更改为不透明度“1.0”，或者每隔 1000 毫秒、2000 毫秒淡化一次。3000毫秒，

（X）但我不想做类似这段代码的事情，但会像jsfiddle 上的这段代码一样淡入，而不是像 jsfiddle 上的这段代码一样淡入。

var DivB = document.getElementsByClassName("box");

setTimeout(function(){DivB[0].style.opacity = "1"}, 1000);

setTimeout(function(){DivB[1].style.opacity = "1"}, 2000);

setTimeout(function(){DivB[2].style.opacity = "1"}, 3000); 

(/)我想让它出现延迟 1000,2000,3000 与 javascript 看起来更短，就像使用 var 'i' 到 javascript 这样的 .. jsfiddle 上的代码。

var DivB = document.getElementsByClassName("box"); 

var i;

function myFade(){

for (var i=0; i<DivB.length; i++){

setTimeout(function(){DivR[i].style.opacity="1"}, i*1000)}

}

myFade();

Answer 1

您正在寻找setIntervalvar DivB = document.getElementsByClassName("box");var divIndex = 0;var interval = setInterval(() => {&nbsp; DivB[divIndex].style.opacity = "1";&nbsp; divIndex++;&nbsp; if (divIndex === divB.length - 1) clearInterval(interval);} , 1000)基本上，这将每隔一秒触发一次，将不透明度设置divB[divIndex]为'1'。divIndex本身也会增加每个间隔。处理完所有DivB元素后，将清除间隔。

Answer 2

你可以这样做 ：var DivB = document.getElementsByClassName("box");function myFade() {&nbsp; for (let i = 0; i < DivB.length; i++) {&nbsp; &nbsp; setTimeout(() => {&nbsp; &nbsp; &nbsp; DivB[i].style.opacity = "1"&nbsp; &nbsp; }, i * 1000)&nbsp; }}myFade();.box {&nbsp; display: inline-block;&nbsp; position: relative;&nbsp; opacity: 0;}<div class='box'>1</div><div class='box'>2</div><div class='box'>3</div>我建议您阅读和之间的区别var，let特别是在使用setTimeoutand的循环时setInterval

Answer 3

您可以从您发布的代码示例之一添加transition: all 1s;到框中的 CSS：var DivB = document.getElementsByClassName("box");setTimeout(function(){DivB[0].style.opacity = "1"}, 1000);setTimeout(function(){DivB[1].style.opacity = "1"}, 2000);&nbsp;&nbsp;setTimeout(function(){DivB[2].style.opacity = "1"}, 3000);&nbsp;.box { display:inline-block; position:relative; opacity:0;&nbsp;transition: all 1s;}<div class='box'>1</div><br/><div class='box'>2</div><br/><div class='box'>3</div><br/>

Answer 4

试试看：function fadeElementsProgressive(className, timePerElement = 1000) {&nbsp; const divs = document.getElementsByClassName(className);&nbsp;&nbsp;&nbsp; for(let i = 0; i < divs.length; i++) {&nbsp; &nbsp; setTimeout(() => {&nbsp; &nbsp; &nbsp; divs[i].style.opacity = 1;&nbsp; &nbsp; }, i * timePerElement)&nbsp; }}fadeElementsProgressive('box');.box { display:inline-block; position:relative; opacity:0; }<div class='box'>1</div><br/><div class='box'>2</div><br/><div class='box'>3</div><br/>这将创建一个获取类名并执行淡入淡出的函数。