[英]Gradually changing opacity with JavaScript doesn't work
我有这个元素:
<div id="newDimention">
<div class="newDimention">
</div>
</div>
我正在尝试使用 javascript 更改其不透明度:
let newDimention=document.getElementById('newDimention');
setTimeout(()=>{
setDimention();
newDimention.innerText="You've uncovered the third dimension."
newDimention.style.color="purple";
newDimention.style.fontSize='30px';
newDimention.style.marginTop='30px';
newDimention.style.opacity="0";
})
const setDimention = () => {
for (var i = 0,b=14; i <= 500; i++) {
setTimeout(()=>{
//document.getElementById("newDimention").style.opacity=String(Math.round(i/50)/10);
newDimention.style.opacity=String(Math.round(i/50)/10);
},i*b)
}
}
我尝试不转换为字符串,尝试通过类 ID 访问。 Devtools 清楚地表明String(Math.round(i/50)/10)
每次都按应有的方式逐渐增加。 但newDimention.style.opacity
每次都保持'0'
。
然后一旦String(Math.round(i/50)/10)==='1'
, newDimention.style.opacity
立即更改为'1'
。 因此它在i===500
之前由于某种原因一直保持为'0'
,然后突然变为'1'
。 我没有任何其他函数来操纵这个元素。 如果我删除行newDimention.style.opacity=String(Math.round(i/50)/10);
不透明度保持在'0'
,所以这条线应该改变这个元素的不透明度。
为什么会这样?
在写这个问题时,我意识到我在for loop
中使用了var
而不是let
,所以当函数在setTimeout
之后最终被触发时,它们使用了i===500
,即最新值。 更改它以let
它:
const setDimention = () => {
for (let i = 0,b=14; i <= 500; i++) {
setTimeout(()=>{
//document.getElementById("newDimention").style.opacity=String(Math.round(i/50)/10);
newDimention.style.opacity=String(Math.round(i/50)/10);
},i*b)
}
}
来自https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let :
“ let
允许您声明仅限于块语句或使用它的表达式的范围的变量,这与 var 关键字不同,后者全局定义变量,或在整个函数局部定义变量,而不管块范围如何”。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.