首頁猿問如何在 Javascript...

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

JavaScript

翻過高山走不出你 2022-10-08 17:11:44

（？）我想像動畫一樣將我的類名“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();

查看完整描述

4 回答

萬千封印

TA貢獻1891條經驗獲得超3個贊

您正在尋找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元素后，將清除間隔。

反對回復 2022-10-08

慕的地6264312

TA貢獻1817條經驗獲得超6個贊

你可以這樣做：

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;

}

我建議您閱讀和之間的區別var，let特別是在使用setTimeoutand的循環時setInterval

反對回復 2022-10-08

倚天杖

TA貢獻1828條經驗獲得超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;}

反對回復 2022-10-08

慕標5832272

TA貢獻1966條經驗獲得超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; }

這將創建一個獲取類名并執行淡入淡出的函數。

反對回復 2022-10-08

4 回答
0 關注
195 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

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

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

4 回答

添加回答