如何在 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

您正在寻找setInterval

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

var divIndex = 0;

var interval = setInterval(() => {

  DivB[divIndex].style.opacity = "1";

  divIndex++;

  if (divIndex === divB.length - 1) clearInterval(interval);

} , 1000)

基本上，这将每隔一秒触发一次，将不透明度设置divB[divIndex]为'1'。divIndex本身也会增加每个间隔。处理完所有DivB元素后，将清除间隔。

Answer 2

你可以这样做 ：

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

function myFade() {

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

    setTimeout(() => {

      DivB[i].style.opacity = "1"

    }, i * 1000)

  }

}

myFade();

.box {

  display: inline-block;

  position: relative;

  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);  

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

.box { display:inline-block; position:relative; opacity:0; 

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) {

  const divs = document.getElementsByClassName(className);

  

  for(let i = 0; i < divs.length; i++) {

    setTimeout(() => {

      divs[i].style.opacity = 1;

    }, i * timePerElement)

  }

}

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

这将创建一个获取类名并执行淡入淡出的函数。