如何在Javascript中使用setTimeout改变风格
如何在Javascript中使用setTimeout改变风格
提问于 2020-06-17 19:17:42
(?)我想把我的类名'box'从'0‘改为'1.0’，就像动画一样，或者每秒钟就淡出1000 my，2000 my。3000毫秒
(X)但是--我不希望做类似于这段代码的事情，而是像这个弹琴上的代码那样出现淡入，而不是在相同的时间淡入，比如这个< code >C13。
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这样。弹琴上的代码。
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();回答 4
Stack Overflow用户
回答已采纳
发布于 2020-06-17 19:23:06
你在找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元素之后，将清除间隔。
Stack Overflow用户
发布于 2020-06-17 19:22:41
您可以从发布的代码示例中将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/>
Stack Overflow用户
发布于 2020-06-17 19:23:27
你可以这样做：
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>
我建议您在使用in循环与var和setInterval时，特别阅读setTimeout和setInterval之间的区别。
希望这能帮上忙！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62436758
复制相关文章
相似问题
腾讯云开发者
