blocks|key|1437175|text|您可以从发布的代码示例中将transition:+all+1s;添加到方框CSS中：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1437176|​|1437177|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);+|code-block|syntax|javascript|1437178|.box+{+display:inline-block;+position:relative;+opacity:0;+

transition:+all+1s;}|1437179|<div+class='box'>1</div><br/>
<div+class='box'>2</div><br/>
<div+class='box'>3</div><br/>|1437180|1437181|entityMap^0|D|J|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|X|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|O|3|P|5|J|7|Z|8|@]|D|@]|E|$K|L]]|$1|Q|3|G|5|6|7|10|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|S|$]]

<p>You can add <code>transition: all 1s;</code> to the box CSS from one of the code examples you posted:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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); </code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.box { display:inline-block; position:relative; opacity:0; 

transition: all 1s;}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='box'&gt;1&lt;/div&gt;&lt;br/&gt;
&lt;div class='box'&gt;2&lt;/div&gt;&lt;br/&gt;
&lt;div class='box'&gt;3&lt;/div&gt;&lt;br/&gt;</code></pre>
</div>
</div>
</p>


blocks|key|474244|text|你在找setInterval|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|474245|var+DivB+=+document.getElementsByClassName("box");
var+divIndex+=+0;
var+interval+=+setInterval(()+=>+{
++DivB[divIndex].style.opacity+=+"1";
++divIndex%2B%2B;
++if+(divIndex+===+divB.length+-+1)+clearInterval(interval);
}+,+1000)|code-block|syntax|javascript|474246|基本上，这将每一秒触发一次，将divB[divIndex]的不透明度设置为'1'。divIndex本身也会增加每个间隔。在处理完所有DivB元素之后，将清除间隔。|BOLD|474247|entityMap^0|3|B|0|0|F|E|11|3|15|8|1U|4|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|S|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]|$9|Y|A|Z|B|C]|$9|10|A|11|B|M]]|D|@]|E|$]]|$1|N|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|O|$]]

<p>You're looking for <code>setInterval</code></p>

<pre><code>var DivB = document.getElementsByClassName("box");
var divIndex = 0;
var interval = setInterval(() =&gt; {
  DivB[divIndex].style.opacity = "1";
  divIndex++;
  if (divIndex === divB.length - 1) clearInterval(interval);
} , 1000)
</code></pre>

<p>Basically, this will fire every one second, setting the opacity of <code>divB[divIndex]</code> to <code>'1'</code>. <code>divIndex</code> itself increments every interval as well. After all the <strong>DivB</strong> elements are processed, the interval will be cleared.</p>


blocks|key|488014|text|你可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|488015|​|488016|var+DivB+=+document.getElementsByClassName("box");

function+myFade()+{
++for+(let+i+=+0;+i+<+DivB.length;+i%2B%2B)+{
++++setTimeout(()+=>+{
++++++DivB[i].style.opacity+=+"1"
++++},+i+*+1000)
++}
}

myFade();|code-block|syntax|javascript|488017|.box+{
++display:+inline-block;
++position:+relative;
++opacity:+0;
}|488018|<div+class='box'>1</div>
<div+class='box'>2</div>
<div+class='box'>3</div>|488019|488020|我建议您在使用in循环与var和setInterval时，特别阅读setTimeout和setInterval之间的区别。|offset|length|style|CODE|488021|希望这能帮上忙！|488022|entityMap^0|0|0|0|0|0|0|C|3|G|B|X|A|18|B|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|F|7|11|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|12|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|13|8|@$P|14|Q|15|R|S]|$P|16|Q|17|R|S]|$P|18|Q|19|R|S]|$P|1A|Q|1B|R|S]]|9|@]|A|$]]|$1|T|3|U|5|6|7|1C|8|@]|9|@]|A|$]]|$1|V|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|W|$]]

<p>You can do this : </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var DivB = document.getElementsByClassName("box");

function myFade() {
  for (let i = 0; i &lt; DivB.length; i++) {
    setTimeout(() =&gt; {
      DivB[i].style.opacity = "1"
    }, i * 1000)
  }
}

myFade();</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.box {
  display: inline-block;
  position: relative;
  opacity: 0;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='box'&gt;1&lt;/div&gt;
&lt;div class='box'&gt;2&lt;/div&gt;
&lt;div class='box'&gt;3&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>I would suggest you to read the difference between <code>var</code> and <code>let</code> specially when using in loops with <code>setTimeout</code> and <code>setInterval</code></p>

<p>Hope this helps !</p>


blocks|key|474251|text|试一试：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|474252|​|474253|function+fadeElementsProgressive(className,+timePerElement+=+1000)+{
	const+divs+=+document.getElementsByClassName(className);
++
++for(let+i+=+0;+i+<+divs.length;+i%2B%2B)+{
++	setTimeout(()+=>+{
++++	divs[i].style.opacity+=+1;
++++},+i+*+timePerElement)
++}
}

fadeElementsProgressive('box');|code-block|syntax|javascript|474254|.box+{+display:inline-block;+position:relative;+opacity:0;+}|474255|<div+class='box'>1</div><br/>
<div+class='box'>2</div><br/>
<div+class='box'>3</div><br/>|474256|474257|这将创建一个函数，该函数获取类名并执行淡出。|474258|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|F|7|V|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|X|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|Q|$]]

<p>Try it:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function fadeElementsProgressive(className, timePerElement = 1000) {
	const divs = document.getElementsByClassName(className);
  
  for(let i = 0; i &lt; divs.length; i++) {
  	setTimeout(() =&gt; {
    	divs[i].style.opacity = 1;
    }, i * timePerElement)
  }
}

fadeElementsProgressive('box');</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.box { display:inline-block; position:relative; opacity:0; }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='box'&gt;1&lt;/div&gt;&lt;br/&gt;
&lt;div class='box'&gt;2&lt;/div&gt;&lt;br/&gt;
&lt;div class='box'&gt;3&lt;/div&gt;&lt;br/&gt;</code></pre>
</div>
</div>
</p>

<p>This will create a function that get a class name and execute a fade.</p>


<p><strong>(?)</strong> I want to change my class name <strong>'box'</strong> from opacity '0' to opacity '1.0' like an animation or fade in every sec 1000ms, 2000ms. 3000ms, </p>

<p><strong>(X)</strong> But <strong>I don't want</strong> to do something like this code but appears fade in like this <a href="http://jsfiddle.net/packy/wvutLag3/5/" rel="nofollow noreferrer">Code on jsfiddle</a> and <strong><em>not</em> fade in at the same</strong> time like this <a href="http://jsfiddle.net/packy/f6wd9m0j/152/" rel="nofollow noreferrer">Code on jsfiddle</a>.</p>

<pre><code>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); 
</code></pre>

<p><strong>(/)</strong> I want to make It appears with the delays 1000,2000,3000 with javascript look shorter like using var 'i' to javascript like this .. <a href="http://jsfiddle.net/packy/gasz7n98/16/" rel="nofollow noreferrer">Code on jsfiddle</a>.</p>

<pre><code>var DivB = document.getElementsByClassName("box"); 
var i;

function myFade(){
for (var i=0; i&lt;DivB.length; i++){
setTimeout(function(){DivR[i].style.opacity="1"}, i*1000)}
}

myFade();
</code></pre>


How to change style with setTimeout in Javascript

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

(?)我想把我的类名'box'从'0‘改为'1.0’，就像动画一样，或者每秒钟就淡出1000 my，2000 my。3000毫秒(X)但是--我不希望做类似于这段代码的事情，而是像这个那样出现淡入，而不是在相同的时间淡入，比如这个< code >C13</code>。var DivB = document.getEle...

问如何在Javascript中使用setTimeout改变风格
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Javascript中使用setTimeout改变风格EN